Hack 3. Navigate the World in Your Web Browser

There is no doubt about it: Google has significantly raised the bar for user interfaces to maps on the Web. Here's why.

When Google Maps was launched in February 2005, the public response was instant and almost overwhelmingly positive. Although the remarkable speed with which any map appeared, tile by tile, had a great deal to do with people's appreciation of Google Maps, most of the praise and recognition was saved for the browser interface itself. The Google Maps user interface is clean, simple, straightforward, quick loading, and easy to use. In other words, it offers yet another classic Google user experience.

1.4.1. Just a Click Away…

The main thing about the Google Maps user interface that really wows everyone the first time they see it is the drag panning. Go to any location in Google Maps, position the mouse pointer anywhere on the map, click and hold your left mouse button, and then move the mouse itself. Lo and beholdthe map moves with it, and the page in your browser doesn't even reload! Releasing the mouse button, of course, causes the map to stop panning.

You'll notice that, in the background, your browser has already loaded many of the tiles outside your original view, so that you don't have to wait for them to load as you're panning aroundthat is, unless you're on a slow Internet connection, or you try to pan very quickly from one edge of the map to the other.

If dragging the map feels a bit wild or difficult to control, the Google Maps interface also allows you to double-click your left mouse button anywhere on the map to recenter it at that location. Double-clicking to recenter gives you a more precise, but somewhat less dynamic way to pan around the map.

The ability to click and drag the map around in the browser window, while not, strictly speaking, new, has never been seen before in a major mapping service on the Web. Gone are the days when browsing a map on the Web involved a tedious wait for the entire web page to reload every time you tried to recenter or zoom the map! Hooray!

1.4.2. You Control the Horizontal and the Vertical

Over on the left side of the map, you should see a number of controls in gray and black, as shown in Figure 1-5. If panning by dragging or double-clicking doesn't suit you, you can use the four arrow buttons to scroll the map north, south, east, and west. The somewhat less obviously labeled button in the center of the other four, which depicts four arrows pointing inwards, returns you to the original view of the last thing you searched for. This button lets you pan around the map, zoom in and out to your heart's content, and then click the return button to go right back to the place you were originally looking at.

Figure 1-5. The Google Maps navigation controls

Below the pan controls lie the zoom controls. Google Maps features 18 zoom levels, from a view that shows multiple copies of the Earth's surface right down to the individual city block. The button marked with the plus sign (+) zooms in one level, while the button at the bottom marked with the minus sign (-) zooms out. Between them runs a long vertical ruler, marked with a tick for each zoom level, with a "handle" indicating the current zoom. You can click anywhere along this ruler to zoom directly to a given map scale, or click and drag the zoom handle up and down the ruler to zoom in and out dynamically. As you zoom in and out, the scale bar at the bottom left changes accordingly. In the smaller versions of the Google Map interface, the vertical zoom control ruler is omitted, leaving the zoom-in and zoom-out buttons stacked immediately below the pan controls.

Last but not least, in the upper right-hand corner of the map, you'll find the map display controls, as shown in Figure 1-6. As of this writing, Google Maps has three modes: Map, Satellite, and a new Hybrid mode that displays streets and labels semi-transparently over a satellite or aerial image. For New Orleans, there is also a "Katrina" view, which is aerial imagery of New Orleans taken August 31, 2005. The user interface features a button for each mode, with the button for the current mode highlighted in bold. Clicking any one of these three buttons changes modes, allowing you to identify features or intersections in one view, and then immediately switch to another to get more information about what's there.

Figure 1-6. The Google Maps modes for New Orleans

1.4.3. Economies of Scale

On the lower left side of the standard Google Maps view, you'll see a scale bar, which indicates distances horizontally across the center of the map in both miles and kilometers, as shown in Figure 1-7. Not only can this be useful for estimating distances "as the crow flies," but it also gives a sense of how the cartographic projection used in Google Maps distorts and exaggerates the Earth's surface as you head towards the north and south poles. (This is why Greenland looks bigger than Australia on Google Maps, when in fact it is much smaller.)

Figure 1-7. The Google Maps scale bar

One cute way to see this in action is to pan up to the islands in northern Canada, zoom in a bit, and then click the map and slowly drag it upwards, thereby panning south. As you move the map, you can watch see the scale bar get smaller and smaller, and then flip over to a larger increment, before continuing to shrink.

Not only is this a good example of the dynamic nature of the Google Maps interface, but it also illustrates one of the downsides of using the familiar Mercator projection, as Google Maps does. The reason Google Maps uses the Mercator projection instead of one that might provide less visual distortion is that, as with other rectangular projections, it treats all lines of latitude as being perpendicular to all lines of longitude. This property makes doing any kind of calculation to place things on the map so much easier that it outweighs the aesthetic detriments of having distorted northern and southern extremes on the map. Additionally, over smaller areas, the Mercator projection preserves angles across local areas on the map, making it suitable for guiding navigation. (Indeed, this is one major reason the Mercator projection continues to be used after 500 years, in spite of its tendency to distort the areas around the poles.)

1.4.4. Take the Shortcut

But, wait, there's more! With Google's typical thoroughness, the Google Maps user interface makes good use of keyboard shortcuts in the web browser as well. Keyboard shortcuts allow you to accomplish the same tasks that most people use their mouse for without ever taking your hands off your keyboard's home row. (And if you're a command-line jockey like me, you gotta love 'em.)

The most immediately useful keyboard shortcuts in Google Maps are, of course, the arrow keys, which allow you to pan the map in much the same way as the aforementioned pan buttons in the upper-left corner of the map, with one difference: if you hold down any arrow key, the map continues to panand fairly smoothly at that, if your computer and 'Net connection are fast enoughuntil you let up on the key. With a little practice, you can scoot around a neighborhood in Google Maps like a pro, without ever touching your mouse.

If you want to pan around faster at one go, you can use the diagonal arrow keys: PgUp and PgDn pan three-quarters of the way across the map north and south respectively, and Home and End quickly pan west and east by the same amount. Finally, the plus (+) and minus (-) keys zoom in and out by one level, respectively. On some Apple keyboards, such as the one supplied with iBooks, Fn-/ generates a plus sign, Fn-; is minus, and Fn-arrow keys provides the PgUp, PgDn, Home, and End functions.

1.4.5. Taste the Secret Sauce

It is a curious fact that, as of this writing, although all the pan and zoom controls have associated keyboard shortcuts, there do not seem to be keyboard shortcuts for switching modes. One almost wonders if this isn't an inadvertent oversight on Google's part. Fortunately, as the patient and attentive reader will discover, since Google's code is running on your web browser, you the hacker can fix any such oversights yourself by dipping into Google's secret sauce.

The secret sauce by which Google offers so much rich functionality with such a seemingly simple interface is referred to by some people as AJAX, which (sometimes) stands for "Asynchronous JavaScript And XML." By using client-side JavaScript to detect user actions and act on them in the background, Google Maps offers a very pleasingly usable interface to a map of the world, all without the interminable wait for the entire page to reload any time something happens. As we'll see later in the book, the deep integration with the browser interface at the JavaScript level is also the source for much of the extreme hackability of Google Maps!