To use a marker manager, create a MarkerManager
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 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:
maxZoom
: specifies the maximum zoom level monitored by this marker manager. The default value is the highest zoom level supported by Google maps.borderPadding
: specifies the extra padding, in pixels, monitored by the manager outside the current viewport. This allows for markers just out of sight to be displayed on the map, improving panning over small ranges. The default value is 100.trackMarkers
: specifies whether movement of movements of markers should be tracked by the marker manager. If you wish to have managed markers that change their positions through the setPoint()
method, set this value to true
. By default, this flag is set to false
. Note that if you move markers with this value set to false
, they will appear in both the original location and the new location(s).
The MarkerManagerOptions
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 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.
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() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(41, -98), 4); window.setTimeout(setupWeatherMarkers, 0); } } function getWeatherMarkers(n) { var batch = []; for (var i = 0; i < n; ++i) { batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() })); } return batch; } function setupWeatherMarkers() { mgr = new MarkerManager(map); mgr.addMarkers(getWeatherMarkers(20), 3); mgr.addMarkers(getWeatherMarkers(200), 6); mgr.addMarkers(getWeatherMarkers(1000), 8); mgr.refresh(); }
View example (weather_map.html)
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) { var layer = officeLayer[i]; var markers = []; for (var j in layer["places"]) { var place = layer["places"][j]; var icon = getIcon(place["icon"]); var title = place["name"]; var posn = new GLatLng(place["posn"][0], place["posn"][1]); var marker = createMarker(posn,title,icon); markers.push(marker); allmarkers.push(marker); } mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]); } mgr.refresh(); }
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 marker = new GMarker(posn, {title: title, icon: icon, draggable:true }); GEvent.addListener(marker, 'dblclick', function() { mgr.removeMarker(marker) } ); return marker; } function deleteMarker() { var markerNum = parseInt(document.getElementById("markerNum").value); mgr.removeMarker(allmarkers[markerNum]); } function clearMarkers() { mgr.clearMarkers(); } function reloadMarkers() { setupOfficeMarkers(); }