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