Learning Google Maps

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.

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: