152 Part III — Google Map Hacks
For example, in the previous examples in this chapter the information generated when the page
is loaded essentially creates a blank page. It is only when the JavaScript embedded into the
page is loaded that the content of the page is altered, first by loading the Google Maps API
and displaying the map, and second through the JavaScript generating HTML to be updated
within an element of the HTML body.AJAX works on the same basic principle. When the HTML of a page is loaded, it starts the
JavaScript that loads additional information to be displayed. Alternatively, the trigger for load-
ing additional information and then displaying that information on the screen can be a link or
form embedded within the HTML.The JavaScript function triggered then loads the data in XML format from the server, parses
the XML content, and extracts the components it wants before updating the page. This entire
process occurs without the page having to reload (because the user hasn’t accessed a different
page; the JavaScript is accessing data in the background).In some ways this is similar to the way an image is loaded into a web page — the information is
displayed inline within the realms of the page that you originally accessed; it is the browser that
extracts the reference to the image and displays it onscreen. The difference with AJAX is that
the information can be loaded from a variety of sources and the information and how it is
shown is highly configurable.Using AJAX relies on two elements:An HTML page with JavaScript that is capable of loading and parsing XML informa-
tion to extract the data that it contains. Most browser implementations of JavaScript
include the ability to load XML using a given URL and to then parse the content. For
convenience, and to cope with different browser implementations, the Google Maps API
includes a wrapper interface that will automatically use either the browser implementa-
tion or its own to handle the loading and parsing of content.An XML source that contains the information that you want to parse and display. The
XML that is loaded can come from either a static file or a CGI script.Before describing the methods for loading and parsing the XML, take a brief look at how the
XML to be loaded can be generated.Generating a Static XML File
Generating XML is not difficult, but there are some tricks to generating XML that is easily
parsed and usable within JavaScript and Google Maps. For the majority of metadata about a
particular map point, it is generally easier to extract information from attributes in a tag than it
is to extract the data constrained by a tag. Using this method you can create a number of XML
tags, and then within the JavaScript obtain a list of tags and extract the appropriate attributes
from the tag, and generate the information.For example, you might specify the latitude, longitude, and title data used in the earlier exam-
ples into a single XML tag:
<marker lat=”52.9114” lng=”-0.6394” title=”China Inn”/>A script to generate XML information based on the information previously stored within a hash
in an earlier example can be adjusted to generate suitable XML, as shown here in Listing 9-3.