MarkerClusterer Examples

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);

A Simple MarkerClusterer Example:

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)

Advanced MarkerClusterer Example:

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)

Speed Test Example

This example will compare adding markers with MarkerClusterer to the normal method of adding markers, and display the time for each.

View example (speed_test_example.html)