Marker Manager Examples

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

var myOptions = {
  zoom: 4,
  center: new google.maps.LatLng(48.25, 11.00),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
mgr = new MarkerManager(map);

You may also specify a number of options to fine-tune the marker manager's performance. These options are passed via a MarkerManagerOptions object, which contains the following fields:

The MarkerManagerOptions object is an object literal, so you simply declare the object without a constructor:

var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };
var mgr = new MarkerManager(map, mgrOptions);

Once you create a manager, you will want to add markers to it. MarkerManager supports adding single markers one at a time using the addMarker() method or a collection passed as an array using the addMarkers() method. Single markers added using addMarker() will appear immediately on the map provided that they fall within the current view and specified zoom level constraints.

Adding markers collectively using addMarkers() is recommended as it is more efficient. Markers added using the addMarkers() method will not appear on the map until you explicitly call the MarkerManager's refresh() method, which adds all markers within the current viewport and border padding region to the map. After this initial display, MarkerManager takes care of all visual updates by monitoring the map's "moveend" events.

Zoom Level Example: Weather Map

The following example creates a mock weather map for Europe. At zoom level 3, 20 randomly distributed weather icons are displayed. At level 6, when all 200 cities with population over 300,000 are easily distinguished, an additional 200 markers are shown. Finally, at level 8, 1000 markers are shown. (Note: to simplify the example, markers will be added at random locations.)

function setupMap() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(48.25, 11.00),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'), myOptions);

  var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
      setupWeatherMarkers();
      google.maps.event.removeListener(listener);
  });
}
function getWeatherMarkers(n) {
  var batch = [];
  for (var i = 0; i < n; ++i) {
    var tmpIcon = getWeatherIcon();

    batch.push(new google.maps.Marker({
        position: getRandomPoint(),
        shadow: tmpIcon.shadow,
        icon: tmpIcon.icon,
        shape: tmpIcon.shape,
        title: 'Weather marker'
        })
    );
  }
  return batch;
}

function setupWeatherMarkers() {
  mgr = new MarkerManager(map);

  google.maps.event.addListener(mgr, 'loaded', function(){
      mgr.addMarkers(getWeatherMarkers(20), 3);
      mgr.addMarkers(getWeatherMarkers(200), 6);
      mgr.addMarkers(getWeatherMarkers(1000), 8);

      mgr.refresh();
  });
}

View example (weather_map.html)

Clustering Example: Google Offices

The marker manager can also perform simple clustering of markers. While it does not do so automatically, you can achieve the desired effect by setting both the minimum and maximum zoom at which a given marker is shown. In this example we create a map of Google offices in North America. At the highest level we show flags of countries in which offices are located. For zoom levels 3 to 7 we show icons over population centers where one or more offices are located. Finally, at levels 8 or higher, we show individual markers for each office.

var officeLayer = [
  {
    "zoom": [0, 3],
    "places": [
      { "name": "US Offices", "icon": ["us", "flag-shadow"], "posn": [40, -97] },
      { "name": "Canadian Offices", "icon": ["ca", "flag-shadow"], "posn": [58, -101] }
    ]
  },
  ...
};

function setupOfficeMarkers() {
  allmarkers.length = 0;
  for (var i in officeLayer) {
    if (officeLayer.hasOwnProperty(i)) {
      var layer = officeLayer[i];

      var markers = [];
      for (var j in layer["places"]) {
        if (layer["places"].hasOwnProperty(j)) {
          var place = layer["places"][j];
          var icon = getIcon(place["icon"]);

          var title = place["name"];
          var posn = new google.maps.LatLng(place["posn"][0], place["posn"][1]);
          var marker = createMarker(posn, title, getIcon(place["icon"]));
          markers.push(marker);
          allmarkers.push(marker);
        }
      }
      mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
    }

  }
  mgr.refresh();
  updateStatus(mgr.getMarkerCount(map.getZoom()));
}

The marker manager now has functions to let you delete individual markers or all the markers in the manager, using deleteMarker and clearMarkers respectively. In the Google Offices example, you can delete a marker by double clicking on it, or entering an integer index in the text box and clicking the delete button. You can clear all the markers by clicking the clear button, and reload them again by clicking the reload button. The relevant code snippets are shown below.

function createMarker(posn, title, icon) {
  var markerOptions = {
    position: posn,
    title: title
  };
  if(icon !== false){
    markerOptions.shadow = icon.shadow;
    markerOptions.icon   = icon.icon;
    markerOptions.shape  = icon.shape;
  }

  var marker = new google.maps.Marker(markerOptions);

  google.maps.event.addListener(marker, 'dblclick', function() {
    mgr.removeMarker(marker)
    updateStatus(mgr.getMarkerCount(map.getZoom()));
  });
  return marker;
}

function showMarkers() {
  mgr.show();
  updateStatus(mgr.getMarkerCount(map.getZoom()));
}

function hideMarkers() {
  mgr.hide();
  updateStatus(mgr.getMarkerCount(map.getZoom()));
}

function deleteMarker() {
  var markerNum = parseInt(document.getElementById("markerNum").value);
  mgr.removeMarker(allmarkers[markerNum]);
  updateStatus(mgr.getMarkerCount(map.getZoom()));
}

function clearMarkers() {
  mgr.clearMarkers();
  updateStatus(mgr.getMarkerCount(map.getZoom()));
}

function reloadMarkers() {
  setupOfficeMarkers();
}

View example (google_northamerica_offices.html)