Google Maps API v3, lots of markers, clustering and performance

JamieNewman picture JamieNewman · Feb 27, 2011 · Viewed 18.4k times · Source

I have about 5000 markers I need to render on Google Map. I'm currently using the API (v3) and there are performance issues on slower machines, especially in IE. I have done the following already to help speed things up:

  1. Used a simple marker class that extends OverlayView and renders a single DIV element per marker
  2. Implemented the MarkerClusterer library to cluster the markers at different levels
  3. Render GIFs for IE, instead of alpha PNGs

Are there faster clustering classes? Any other tips? I'm trying to avoid server-side clustering unless this is the only option left to squeeze performance out of the system.

Thanks

Answer

Valerion picture Valerion · Mar 1, 2011

I used a method that loads all the markers onto the page, and then listens for the map to finish panning.

When the map has finished panning, I first check the zoom level - if it's too high I don't display anything. If it's at an acceptable level, I then loop through the markers I have stored and see if they fall into the bounding box of the map. If they do, they get added. A second loop then removes any that have moved out of the view.

The highest number I've used is about 30,000 markers with this method, although I have it so you must be zoomed in quite far to see them. In areas of higher concentration of markers it's obviously a little slower but it's useable.