Hacking Google Maps and Google Earth (ExtremeTech)

(Dana P.) #1

Chapter 7 — Extending the Google API Examples 109


Moving about a Map


Often you’ll let people move around the map at will, but more than likely you will want to pro-
vide some quick methods for taking your users to particular places on the map. Three methods
are useful in this situation:

The first, which you have already used, is centerAndZoom(). It centers the map on a
supplied GPointand zooms to a specific level on the map. The move is instantaneous
and is best used when initializing the map for the first time and centering (and zooming)
on a specific area. For example:
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

The second method is centerAtLatLng(), which centers the map on the supplied
GPoint. The movement is instantaneous, but does not change the zoom level. For
example:
map.centerAtLatLng(new GPoint(-122.1419, 37.4419));

For a smoother sequence, use the third method:recenterOrPanToLatLng(). This
smoothly moves the map to the new point, if the map data is available to do a smooth
pan to the new point. This is most effective in maps in which you are redirecting users
to different points within a reasonable locale (such as places within the same borough
or city).

For example, Listing 7-3 shows some sample code that provides quick links to four of my
favorite restaurants. In this case, I’m using recenterOrPanToLatLng(). For the first two
restaurants that are both in Grantham, you should get a smooth movement when clicking the
two links. But click to the restaurants in Seattle, or even Ambleside, and the distance is so great
that a smooth pan to the new location is out of the question.

Listing 7-3:Moving Users about a Map

<!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 3</title>
<script src=”http://maps.google.com/maps?file=api&v=1&key=XXX”
type=”text/javascript”>
</script>

<script type=”text/javascript”>
Continued
Free download pdf