Clustering Markers in Google Maps

One issue I recently encountered while developing an application using the Google Maps API was that when the number of markers gets considerably large (approx. 5,000) that the map slows down significantly. This is due to the map being a client-side application, therefore, it is relying on the browser to render the map. Now, imagine or take my example of attempting to map nearly 1 million markers. See the issue? You might as well start plotting them with pins using the map on your wall.

Introducing MarkerCluster
The solution is simple, normalize the markers to a manageable amount. Yes, you will not be able to see all the markers at any given time, but you will get a heat map that shows you the density of the markers. When you zoom in the clusters break up into smaller children thus allowing you to see the markers on a more accurate level. What makes this feature great is that is a simple one line of code and the deed is done. That being said, here we go:

markerClusterer = new MarkerClusterer(map, markers, { gridSize: 20 });

The parameters are simple: map (the map object), markers (the marker array), and then any options you wish to use. The gridSize option is very useful because it defines the density of the clustering based on the width of the grid in pixels. So what are you waiting for? Get to using it.


Related Post