So you have a lot of markers...

Justin Poehnelt - Feb 10 '22 - - Dev Community

I often run into questions about how do I render XX,XXX markers on a map in a web application, specifically a google.maps.Map() instance. The answer usually depends on the particular application requirements, but there are only a few good options.

Options

  1. Cluster the markers
  2. Use WebGL
  3. Write a custom OverlayView
  4. Render the markers server side

Clustering

Typically, I suggest starting with #1, clustering the markers. Two libraries to be aware of are @googlemaps/markerclusterer and supercluster, a high performance kd-tree cluster implementation.

Marker clustering using @googlemaps/markerclusterer

Note: @googlemaps/markerclusterer using supercluster internally.

For React users, check out use-supercluster.

. . . .
Terabox Video Player