To use a marker clusterer, create a MarkerClusterer
object. In the simplest case, just pass a map to it.
var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); var mc = new MarkerClusterer(map);
You may also specify a number of options to fine-tune the marker manager's performance. These options are passed via a MarkerClustererOptions
object.
The MarkerClustererOptions
object is an object literal, so you simply declare the object without a constructor:
var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); var mcOptions = {gridSize: 50, maxZoom: 15}; var mc = new MarkerClusterer(map, [], mcOptions);
Once you create a marker cluster, you will want to add markers to it. MarkerClusterer
supports adding markers using the addMarkers()
method or by providing a array of markers to the constructor:
var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); var mcOptions = { gridSize: 50, maxZoom: 15}; var markers = [...]; // Create the markers you want to add and collect them into a array. var mc = new MarkerClusterer(map, markers, mcOptions);
This example will show 100 markers on map.
if(GBrowserIsCompatible()) { map = new GMap2($('map')); map.setCenter(new GLatLng(39.91, 116.38), 2); map.addControl(new GLargeMapControl()); var markers = []; for (var i = 0; i < 100; ++i) { var latlng = new GLatLng(data.photos[i].latitude, data.photos[i].longitude); var marker = new GMarker(latlng); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers); }
View example (simple_example.html)
With this example, you can test MarkerClusterer
with different
max zoom levels, grid size and styles, all the options in MarkerClustererOptions
.
View example (advanced_example.html)
This example will compare adding markers with MarkerClusterer
to the normal method of adding markers, and display the time for each.