124 Part II — Instant Gratification
Listing 7-10 (continued)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);
});
}
}//]]>
</script>
</head>
<body onload=”onLoad()”>
<table cellspacing=”0” cellpadding=”0” border=”0”>
<tr>
<td><div id=”map” style=”width: 400px; height: 600px”></div></td>
<td><div id=”earth” style=”width: 400px; height: 600px”></div></td>
</tr>
</table>
</body>
</html>Two events are configured, one for each map. On the default map, a listener is added that
responds to the movement event. When the map is moved, you also move the satellite map to
be at the same position. The other listener does the opposite when the satellite map moves
(that is, it moves the map to the same location). You can see a screenshot of the two maps in
action in Figure 7-12, although this is definitely an example where you need to try out the map
for yourself to see it in action.Remember, all examples from the book can be tried online by using the chapter and listing refer-
ence. For example, you can view the map created in Listing 7-10 by visiting http://maps
.mcslp.com/examples/ch07-10.html.The effect of the two listeners is to keep the two maps in synch with each other. Move one
map, and the other moves to the same location. Although you can view the map and satellite
image using the hybrid map type, sometimes the separate layout is useful.