Professional Ajax, 2nd Edition

10.3. Google Maps API

When Google Maps first debuted, it was the victim of numerous hackers. People were enthralled with this next-generation Ajax application that did things no one had ever seen done before. Developers from around the world wanted to know how it worked and how they could use it to their advantage. Though not damaging in any way, these early Google Maps hackers opened the eyes of the folks in Mountain View, California, and soon the Google Maps API was released to the public.

10.3.1. How Does It Work?

The Google Maps API is one of the most interesting uses of Ajax in that it doesn't necessarily need to use XHR or iframes to accomplish its functionality. Instead, the API uses the dynamic nature of images to fetch new information from the server on demand. Although it doesn't use the Ajax image technique discussed in Chapter 2, the same basic idea is at work: images can have their sources changed at any time. The Google Maps API uses this functionality to create the illusion of panning over one large image when, in reality, it loads only small pieces of the overall image to give the perception of a much larger one.

The initial view of the map is split into several images that are placed next to each other, giving the appearance of one large image. When a map is first loaded, the API determines how many of these images are necessary to completely fill the map container. The images are arranged in a grid that overlaps the ends of the map container. If the map is zoomed, ...