Using the Map

The million-marker map extends the Google map API GMap2 class with the following methods and events:


Method Returns Description
enhance() void initializes the flash extensions. Call this after creating a google map the usual way
addFastMarkers(arr) void Adds one or more markers to the map. Takes an array of lat/long pairs.
clearFastMarkers() void Removes all flash markers from the map
getVisibleMarkers(start, limit) Array Returns a list of limit ids of all visible markers in the viewport, beginning at offset. If a paint region exists, filters by that painted region. Due to lameness in the flash/javascript bridge, limit can't exceed 100
getVisibleMarkersCount() int Returns a count of all markers in the viewport, filtered by painted region if a painted region exists
Event Passes Description
paintstart none User has started painting the map
paintend none user has stopped painting the map
flashloaded none Fires when the flash layer has loaded and fully initialized
markerclick id, GLatLng Fired when a user clicks on a marker

Known Issues

Example

<html> 
<head> 
<title>Million Marker Map Demo</title> 
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY"
      type="text/javascript"></script>
<script src="http://bigmap.cantbedone.org/api/0.1/mmap.js"></script>
<script language="javascript">
	var map;
	function init()
	{
		var div = document.getElementById("map");
		map = new GMap2(div);
		 
		// set a callback to run when the map is ready
		GEvent.addEventListener(map, 'flashloaded', run);
		
		map.enhance(); // add the extensions
		map.setCenter(new GLatLng(41.0, -73.9), 10);
	}
	
	function run()
	{	
		var markers = new Object();
		var lat = map.getCenter().lat();
		var lng = map.getCenter().lng();
		
		// throw some random markers on the map
		for (var i=0;i<2000;i++)
		{
			var thislat = Math.random() + lat - 0.5;
			var thislng = Math.random() + lng - 0.5;
			markers[i] = [ thislat, thislng ];
		}
		map.addFastMarkers(markers);
		
		GEvent.addListener(map, "markerclick", detail );
		
	}

	// called on flash marker click
	function detail(id, coords)
	{
		var c = map.getVisibleMarkersCount();
		map.openInfoWindow(coords, "showing " 
			+ id + " (of  " + c + ")");
	}

</script>
</head>
<body onload="init()">	
	
  <!-- map div must have style tag with explicit size and position data -->
  <div id="map" style="width:300px;height:300px;left:20px;top:100px;position:absolute">
  </div>
</body>
</html>