MarkerClustererPlus Examples

API Reference

Note: Be sure to include markerclusterer.js or markerclusterer_packed.js in your HTML document.

	<script src="/path/to/markerclusterer.js" type="text/javascript"></script>

To use a marker clusterer, create a MarkerClusterer object. In the simplest case, just pass a map to it.

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);
var mc = new MarkerClusterer(map);

You may also specify a number of options to fine-tune the marker clusterer's performance. These options are passed via an object.

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);

Once you create a marker clusterer, you will want to add markers to it. You can add markers using the addMarker() or addMarkers()method or by providing an array of markers to the constructor:

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [...]; // Create the markers you want to add and collect them into an array.
var mc = new MarkerClusterer(map, markers, mcOptions);

Simple Example

This example will show 100 markers on a map.

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

var markers = [];
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

View example (simple_example.html)

Advanced Example

With this example, you can test a marker clusterer with different maximum zoom levels, grid sizes and styles, all the options.

View example (advanced_example.html)

Speed Test Example

This example compares adding markers with a marker clusterer to the normal method of adding markers, and display the time for each.

View example (speed_test_example.html)

Event Handling Example

This example shows how to add event listeners to a marker clusterer.

View example (events_example.html)