Hacking Google Maps and Google Earth (ExtremeTech)

Chapter 9 — Using Overlays 169

The final system relies on three components:

An HTML file with embedded JavaScript that provides the methods for loading and

formatting data in a suitable structure.


A CGI script that can return information about the available cities and restaurants

within a specific city in XML format.

An XSL file to format the information window for a restaurant and marker.

The JavaScript is the main component.

The JavaScript Component

The bulk of the HTML for a page does not change, but the JavaScript that loads the city,
hotel, and other information in response to different triggers needs to be heavily updated.

Setting Up the Environment

The JavaScript will rely on the global variables in Listing 9-14 to hold the information that is
required throughout the rest of the script.

Most languages frown on the heavy use of global variables, but in JavaScript the active, and
inactive, elements make it difficult to communicate and share information across the different
components without using global variables.

Listing 9-14: Global Variables

var map;
var points = [];
var index = 0;
var cities = [];
var markers = [];
var markerinfo = []
var infopanel;
var message;

The arrays are used to hold information about the main components of the application —
points on the map, cities, markers, and the contents of information windows. These variables
will need to be populated as different information is loaded by the JavaScript so that you can
select other information to be displayed onscreen.

Loading a City List

Loading a list of cities to be displayed on the default page for the map is based on the same
principles as loading a list of restaurants, except that a different XML document is parsed. To
get the different XML document, you supply some arguments to the GETrequest through the