ClusterManager (v3)

for Google Maps v3 Demo (200 random markers)

Rewritten from v1.01 to work with gmaps v3 (yes, skipped a version to make it more logically match with gmaps version). It offers basically the same functionality as the old script (see below).

The red squares with C represent multiple markers. Click on it to see the contents. Drag regular markers around and near other markers to create new clusters.

The ClusterManager allows you to manage markers into clusters. The clusters are created automatically when two markers overlap each other.

For more information on how the script works internally, check out the blog post :)

Usage (see also source of this page):

... var map ...
var cm = new ClusterManager(map, {
	objClusterIcon: 'markers/cluster.png',
	objClusterImageSize: new google.maps.Size(20,20)

// now json contains a list of marker positions. lets add them.
for (var i = 0; i < json.length; ++i) {
	var item = json[i];
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(item.latitude, item.longitude),
		title: item.title,
		// we want a specific size for the marker
		icon: 'markers/'+item.icon+'.png'
	marker.CMeventClick = function(i){ 
		return function(){ // return function to prevent closure problems for using i
			document.title = "marker "+i; // set browser title to show the number of markers in this cluster (onclick)
	marker.CMeventDrag = function(){
		console.log("dragged the marker");
	cm.addMarker(marker, new google.maps.Size(20, 20));

The rest is magic. Download source.

© 2010,

ClusterManager (v1.01)

for Google Maps v2 Demo (200 random markers).

Green = marker
Red = cluster

Click on map to add a marker.
Click on green marker to remove it.
Click on cluster to see all markers it contains.

Download script
This script allows you to cluster markers that overlap.

To use, you only have to create a new object by using objCM = new ClusterManager(objMap); where objMap is your GMap2 object (usually saved in a map variable).
Now you can add markers to the manager by simply calling objCM.addMarker(objMarker, index); or you can add multiple markers by calling objCM.addMarker(arrObjMarkers, index); where the markers are what is returned by calling new GMarker(latlng); and the (optional) index is where you want to insert the(se) marker(s).

By default, markers are removed when they are clicked on. To use your own function simply assign it to the CMeventClick property of the marker (objMarker.CMeventClick = function() { /* do stuff */ };). The same applies for the drag-end event. Please note that the script will remove and add the marker at drag-end. This happens before your custom drag-end event fires.

Alternatively you can append your own event factories to objCM.funcClickFactory and objCM.funcDragFactory and objCM.funcClusterClickFactory to replace the default behavior for these events. This only impacts dragging as the CM script needs to update stuff when markers move around.

So to create a custom click event for all the cluster markers replace objCM.funcClusterClickFactory with a function that returns a function that executes what you want to do when somebody clicks on a cluster.

For more details and functions you should take a look at the source and implemenation example.

Changelog for v1.01 (February 2009):

+ added removeAll function (inefficient, ugly): removes all markers from this manager
+ added constructor argument: second argument sets two options for the cluster markers; clickable and the icon
* changed the default cluster icon to not changing at all (if you dont supply a marker icon by constructor, google uses the default marker)
- removed some commented code
- commented out the default clickfactory example, remove comment to see your regular points get deleted onclick
* fixed a closure bug related to the default cluster click factory. It would cause every click link in the cluster windows to point to the same marker.

I'll have a go at cleaning up the code, it's a mess. Learned a lot of new techniques since I created it :)

© 2009,