Google Maps
Multiple Maps on One Page
Having two maps (or even more) in the page is no more difficult than having just the one map. All that we need to do is to place the code for each of our two maps inside the load function making sure that each map used different variable names for each of the maps. The easiest way to do this is to just add numbers to the end of the variable names where ever they occur . For example here is what the load function looks like if we combine the maps from tutorials 3 and 8 into the same page.
function load() {
if (GBrowserIsCompatible()) {
var map1 = new GMap2(document.getElementById("map"));
map1.setCenter(new GLatLng(37.4419, -122.1419), 17);
var map2 = new GMap2(document.getElementById("map1"));
var point = new GLatLng(-33.9419, 150.9473);
map2.setCenter(point, 10);
var marker = new GMarker(point);
map2.addOverlay(marker);
GEvent.addListener(marker2, "click", function() {marker.openInfoWindowHtml('here I am');});
map2.addControl(new GSmallMapControl());
map2.removeMapType(G_HYBRID_MAP);
var mapControl = new GMapTypeControl();
map2.addControl(mapControl);
}
}
if (GBrowserIsCompatible()) {
var map1 = new GMap2(document.getElementById("map"));
map1.setCenter(new GLatLng(37.4419, -122.1419), 17);
var map2 = new GMap2(document.getElementById("map1"));
var point = new GLatLng(-33.9419, 150.9473);
map2.setCenter(point, 10);
var marker = new GMarker(point);
map2.addOverlay(marker);
GEvent.addListener(marker2, "click", function() {marker.openInfoWindowHtml('here I am');});
map2.addControl(new GSmallMapControl());
map2.removeMapType(G_HYBRID_MAP);
var mapControl = new GMapTypeControl();
map2.addControl(mapControl);
}
}
Here's the first map.
Here's the second map in the same page.
