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
- Cluster the markers
- Use WebGL
- Write a custom OverlayView
- 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.
Note: @googlemaps/markerclusterer using supercluster internally.
For React users, check out use-supercluster.
Top comments (0)