Guide
This guide assumes that you are reasonably familiar with creating a basic map using the Google Maps API. If you are a complete beginner then please try some of the online tutorials to familiarise yourself with the API. You can find links to tutorials on the Useful Links page.
Example:
Create a new map, an array of markers and a ClusterMarker.
The map will be contained by a DIV element with an id of 'map'.
var map=new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(0, 0), 0, G_NORMAL_MAP);
var marker, markersArray=[];
// (Entire example json data can be found here here.) for (var i=0; i<json.length; i++) {
marker=newMarker(new GLatLng(json[i].lat, json[i].lng), json[i].id);
markersArray.push(marker);
}
var cluster=new ClusterMarker(map, { markers:markersArray } );
cluster.fitMapToMarkers();
function newMarker(markerLocation, markerId) {
var marker=new GMarker(markerLocation, {title:'Marker['+markerId+']'});
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml('<p>Marker['+markerId+'] clicked.</p>');
});
return marker;
}
This will create a map, an array of markers, and a ClusterMarker and then finally draw the markers on to your map.
To create a ClusterMarker you must pass it one argument: a reference to your map.
To see full details about optional arguments that can be used to create ClusterMarker please visit the Reference page.
To see this example in action please visit the Example Map page.
The full source code for the example map can be found here.
ClusterMarker: Index
