126 Part II — Instant Gratification
Listing 7-11: Adding Overlays to Multiple Maps
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8”/>
<title>MCslp Maps Chapter 7, Ex 11</title>
<script src=”http://maps.google.com/maps?file=api&v=1&key=XXX”
type=”text/javascript”>
</script>
<script type=”text/javascript”>
//<![CDATA[
var map;
var earth;
function onLoad() {
if (GBrowserIsCompatible()) {
map = new GMap(document.getElementById(“map”));
map.centerAndZoom(new GPoint(-0.64,52.909444), 4);
earth = new GMap(document.getElementById(“earth”));
earth.centerAndZoom(new GPoint(-0.64,52.909444), 4);
earth.setMapType(G_SATELLITE_TYPE);
GEvent.addListener(map,’moveend’,function() {
var center = map.getCenterLatLng();
earth.recenterOrPanToLatLng(center);
});
GEvent.addListener(earth,’moveend’,function() {
var center = earth.getCenterLatLng();
map.recenterOrPanToLatLng(center);
});
addmarker(-0.6394,52.9114,’China Inn’);
addmarker(-0.64,52.909444,’One on Wharf’);
addmarker(-0.6376,52.9073,’Siam Garden’);
}
}
function addmarker(x,y,title) {
var point = new GPoint(parseFloat(x),parseFloat(y));
var marker = new GMarker(point);
GEvent.addListener(marker,
‘click’,
function() {
marker.openInfoWindowHtml(‘<b>’ + title + ‘</b>’);
}
);
map.addOverlay(marker);
earth.addOverlay(marker);