Google Maps API Tutorial

© 2006, 2007, 2009 Mike Williams

Translate this page:


Jef Poskanzer's Clusterer

If you happen to have thousands of points that you want to plot, you'll find that the map becomes too slow to be usable. One way round this, without a server side database, is to use Jef Poskanzer's excellent Clusterer.js.


Here's an example

Instead of displaying the markers directly, you tell the Clusterer about them, and it monitors the map movements and zoom level and determines when it is appropriate to display icons that indicate clusters, and when it is appropriate to display individual markers.

Jef has asked me not to describe how to use Clusterer, so I won't.


If you don't like the default Clusterer settings, then you can set some parameters.
  • clusterer.icon
    can be set to the GIcon to be used to indicate a cluster, so you can use your own marker icon to match the rest of your page.
  • clusterer.maxVisibleMarkers
    sets the maximum number of icons that will be displayed at any one time. The default is 150.
  • clusterer.gridSize
    sets the size of the grid used for placing the clusters. The default value of 5 indicates that there can be 5 clusters from east to west across the map.
  • clusterer.minMarkersPerCluster
    sets the minimum number of markers that can be in a cluster. The default value is 5.
  • clusterer.maxLinesPerInfoBox
    sets the number of detail lines that will be displayed in the info window associated with a cluster. If you've got a small map, then you may need to reduce this to prevent the cluster info boxes being too large for your map. If there are more markers in a cluster than this value, then the info window adds a line that says ".. and XXX more". The default value is 10.
You don't have to set any of these parameters, the Clusterer works perfectly well with the default settings.

Back to Mike's Homepage
Up to the start of this tutorial