110 Part II — Instant Gratification
Listing 7-3(continued)//<![CDATA[var map;function onLoad() {
if (GBrowserIsCompatible()) {
map = new GMap(document.getElementById(“map”));
map.centerAndZoom(new GPoint(-0.64,52.909444), 2);
}
}function movemap(x,y) {
map.recenterOrPanToLatLng(new GPoint(parseFloat(x),parseFloat(y)));
}//]]>
</script>
</head>
<body onload=”onLoad()”><div id=”map” style=”width: 800px; height: 600px”></div>
<ul>
<li><a href=”#” onClick=”movemap(-0.64,52.915423);”>China Inn, Grantham</a></li>
<li><a href=”#” onClick=”movemap(-0.64,52.909444);”>One on Wharf, ;
Grantham</a></li>
<li><a href=”#” onClick=”movemap(-2.9638,54.4334);”>Glass House, ;
Ambleside</a></li>
<li><a href=”#” onClick=”movemap(-122.3346,47.6133);”>Dragonfish ;
Asian Cafe, Seattle</a></li>
</ul>
</body>
</html>The movemap()function does all the work, accepting two arguments that are used to gener-
ate a GPointand move the map by calling recentOrPanToLatLng()on the map object.Straightforward links, which call the function, are then added as HTML to the end of the
page. Clicking a link recenters the map to that location. Figure 7-4 shows the initial display.
To best understand how this works, I highly recommend that you try this application for
yourself.