Just as there are different UI elements packaged up in one of the major JavaScript libraries, vendors have already started to create reusable JavaScript components. The most famous of these Ajax widgets is Google Maps. In this section, we’ll look at how to embed a Google map using the Google Maps API. The online documentation on how to get started with the maps at the Google web site is good.[117]
Here we will set up a simple map and then use the JavaScript Shell to work with a live map so that you can invoke a command and see an immediate response. The intended effect is that you see the widgets as dynamic programs that respond to commands, whether that command comes in a program or from you entering that command.
Use the Google Maps API to make a simple map:
Make sure you have a public web directory to host your map and know the URL of that directory. Any Google map that uses the free, public API needs to be publicly visible.
Go to the sign-up page for a key to access Google Maps.[118]
Read the terms of service,[119]http://examples.mashupguide.net/ch08. Write down the resultant
key.
Copy and paste the HTML code into your own page in your web-hosting directory. You should get something like the following (except that the code will have your API key):[120]
<!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>Google Maps JavaScript API Example</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=[API_key]"
type="text/JavaScript"></script>
<script type="text/JavaScript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Now make one modification to the example by removing the var keyword
in front of map to make it a global variable that is thus accessible to
the JavaScript Shell. That is, change the following:
var map = new GMap2(document.getElementById("map"));
to map = new GMap2(document.getElementById("map"));
to expose the map object to the JavaScript Shell utility.[121]
Invoke the JavaScript Shell for your map by hitting the JavaScript Shell bookmarklet in the context of your map. Type the following code fragments, and see what happens. (Note that another approach is to modify your code directly with these code fragments and reload your page.) One can correlate the actions to the documentation for version 2 of the Google Maps API.[122]
To return the current zoom level of the map (which goes from 0 to 17, with 17 for the most detailed), use this:
map.getZoom()
13
To obtain the latitude and longitude of the center of the map, enter the following:
map.getCenter()
(37.4419, -122.1419)
To center the map around the Campanile for UC Berkeley, use this:
map.setCenter(new GLatLng(37.872035,-122.257844), 13);
You can pan to that location instead:
map.panTo(new GLatLng(37.872035,-122.257844));
To add a small map control (to control the zoom level), use the following:
map.addControl(new GSmallMapControl())
map.addControl(new GMapTypeControl())
To add GMap keyboard navigation so that you can pan and zoom with the keyboard, use this:
window.kh = new GKeyboardHandler(map)
[object Object]
To fully zoom out the map, use this:
map.setZoom(0)
To zoom in all the way, use the following:
map.setZoom(17)
To set the variable maptypes to an array holding three objects, use
this:
maptypes = map.getMapTypes()
[object Object],[object Object],[object Object]
To get the name of the first entry in maptypes (1 corresponds
to satellite, while 2 corresponds to the hybrid map type):
map.getMapTypes()[0].getName()
Map
To get the current map type, you can get the object and the name of that type object:
map.getCurrentMapType()
[object Object]
map.getCurrentMapType().getName()
Map
To set the map type to satellite, use the following:
map.setMapType(maptypes[1]);
You can zoom one level in and out if you are not already at the max or min zoom level:
map.zoomIn()
map.zoomOut()
To make an overlay, try the following:
point = new GLatLng (37.87309185260284, -122.25508689880371)
(37.87309185260284, -122.25508689880371)
marker = new GMarker(point)
[object Object]
map.addOverlay(marker);
To make something happen when you click the marker, type the following:
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml('hello'); })
[object Object]
There are many more features to explore, such as polylines, overlays, and draggable points. To learn more, I certainly recommend the “Google Maps API: Introduction” documentation.[123]