Hacking Google Maps and Google Earth (ExtremeTech)

Using Overlays

T

he overlay is the most basic piece of additional layout information

that you can add to a Google Map, but it is also very powerful. By

creating multiple Google Maps markers, you provide an effective way

of highlighting different points on your map. With the addition of more

detailed data about the point using an info window, you can provide a fully

interactive experience.

This chapter shows how you can extend and improve upon the basic marker

through a combination of the information that is displayed, how the marker

is shown, and how additional information about the marker is displayed.

Building in Multiple Points

Chapter 7 covered the basic processes behind extending the basic Google

Maps examples into your own custom maps, highlighting the points you

wanted. It is the JavaScript within an HTML page that actually creates the

points on the map, so any system that adds multiple points must be part of

the JavaScript process.

How you add the additional points that you want to a map will largely

depend on the complexity of the information, how dynamic you want the

map to be, and the capabilities of your environment. For very simple maps

and layouts, for example, you may simply want to extend the information in

the HTML file for your map. In a more dynamic environment, you may

want to generate the HTML dynamically. Both solutions are covered here,

before more complex, completely dynamic solutions are covered later in this

chapter.

Extending the Source HTML.

The simplest method of adding more points to your map is to embed them

into the HTML for your map. You cannot display a Google Map without

some form of HTML component to encapsulate the JavaScript that defines

the map parameters and properties.

Adding points in this way is therefore a case of adding the necessary

JavaScript statements to the HTML. To extend the basic functionality a bit

further than simply adding points, you’ll also add a list of the points and

create a small function that will move to a particular point when the high-

lighted point is clicked.

̨Build in multiple

points

̨Make the

generation dynamic

̨Extract information

from a database

̨Extend the

information pane

chapter

in this chapter