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)
		};
	}(i);
	
	marker.CMeventDrag = function(){
		console.log("dragged the marker");
	};
	
	cm.addMarker(marker, new google.maps.Size(20, 20));
}

The rest is magic. Download source.

© 2010, qfox.nl

ClusterManager (v1.01)

for Google Maps v2 Demo (200 random markers).