Hacking Google Maps and Google Earth (ExtremeTech)

254 Part III — Google Map Hacks

By association there are also the following operations:

Loading a saved route.


Editing a saved route (by re-saving an existing route).

The information panel is used to list different routes and other data, the message window helps

instruct the user on using the system, and the recording status area displays the current state of

the recording mechanism.

Global Variables

A number of global variables are required to hold the information for the application. Many of

these variables are used to hold references to the HTML elements used to show messages and

other information during the execution of the application. Check the following code, which

includes annotations for each of the variables:

var map; // the main map object

var points = []; // the list of active points in the current route

var route; // the GPolyline of the current route

var routelistener; // the listener object for updating the current route

var rrecording; // the HTML reference for current recording mode

var routeidfield; // the HTML reference of the ID in the form

var routetitle; // the HTML reference of the title in the form

var routedescription; // the HTML reference of the description in the form

var message; // the document reference of the message panel

var infopanel; // the document reference of the info panel

var icontags = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’;

The last item (which is not commented) is a simple string of the alphabet that you’ll use to

select the right icon for a marker when displaying a list of the available routes.

With these in place the rest of the application that uses these elements can be built.

Enabling the Route Recording Process

The main component of the application is the ability to record a route, which is accomplished

using the startRoute()function. The process has several stages. First, a listener must be

added to the map so that each time the user clicks the map, you record the location of the click

and push it onto an array of points. As a visual aid for the user, a marker is placed on the map

for the first click, and then the line is drawn for each point pair to show the route they are

recording onto the map.

Note, however, that the array of points is not emptied. This enables the user to start and stop

the recording process without affecting the list of existing points. This enables the user to load

an existing route and extend or modify it, changing the application from a basic route recording

system into a more useful route editing system.