Yahoo!'s Maps
Yahoo! may have come later to the open maps game, but when it came, it came with a vengeance, providing both a Flash and non-Flash alternative. In this section, I'm focusing on the JavaScript-only API, but if you have time, I recommend checking out the Flash-based functionality, too.

Figure 14-5. Using GPolygon instead of GPolyline to map out a route
Yahoo!'s Run
To begin with Yahoo! Maps, you have to get an application key. Unlike Google's API, Yahoo!'s map keys work in subdirectories under the URL specified when signing up for the key. Once you have the key, add the Yahoo! Maps script URL to the page, along with a div element serving as a container.
Superficially, it may seem as if Yahoo!'s API is similar to Google's. However, as the first example—Example 14-4, which duplicates the same functionality as Example 14-1—demonstrates, the two are quite different. The example creates a map, centers it, and adds controls for both type and zooming, as well as a marker at the center location—a good basic map, probably meeting 90% of most map needs.
Example 14-4. Map with controls, centered at the St. Louis Arch, and with a marker
<!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> <title>Google Maps JavaScript API Example</title> <meta http-equiv="content-type" content="text/html; ...