Hacking Google Maps and Google Earth (ExtremeTech)

168 Part III — Google Map Hacks

Dividing the Application into Components

Before the specific scripts and elements are described, take a closer look at the elements that

make up a dynamic map.

Previous examples have been dynamic when loading the XML, but the XML that was gener-

ated, although generated on the fly, was based on a static SQL statement pulling out every

record from the table.

For your dynamic example, the HTML file (and the JavaScript that supports it) will be the

only component that you load. Everything else about the page will be based entirely on

JavaScript loading XML and making modifications to the HTML and the Google Map.

To start with, the database will be extended to show data about restaurants in towns and cities

other than Grantham. Instead of initially showing Grantham on the map, the whole of the

U.K. will be displayed instead, and a list of all the unique cities in the database will be listed in

the information window on the right. That list of cities will need to be requested from the

database.

Once the database has returned a list of cities, the application will provide this list in a method

that in turn triggers the JavaScript to list the restaurants from that specific city and display

them in the same manner as before. In addition to the information window being triggered

when the user clicks an information marker, you will also trigger the information window when

the user clicks the restaurant name in the list (as opposed to moving the map to that marker).

Finally, the user will be able to return to a list of the available cities.

The entire process, and the interaction between the main HTML page and the server that pro-

vides the data to be used on the page, can be seen in Figure 9-5.

FIGURE9-5: The interactive map operations in action.

Map

Server

Map with list of

supported cities

Map showing markers

and list of restaurants

Map with list of

supported cities

Request list of cities

Return list of cities (as XML)

User requests list of

restaurants in specific city

Return list of

restaurants (as XML)

Request list of cities

Return list of cities (as XML)

Request list of cities

Return list of cities (as XML)

User requests list of

restaurants in specific city

Return list of

restaurants (as XML)

Request list of cities

Return list of cities (as XML)