DEV Community

Cover image for So you have a lot of markers...
Justin Poehnelt for Google Maps Platform

Posted on

So you have a lot of markers...

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.

Top comments (0)