Hacking Google Maps and Google Earth (ExtremeTech)

106 Part II — Instant Gratification

Remember, all examples from the book can be tried online by using the chapter and listing refer-

ence. For example, you can view the map created by Listing 7-1 by visiting http://maps

.mcslp.com/examples/ch07-01.html.

Adding Controls to the Map

Although you may at times want to limit how people interact with their maps, more often than

not you will want to allow them to move and zoom freely through your map application.

The most effective way to do this is to add the standard Google Maps controls to your map

application. You accomplish this by using the addControl()method to the map object. For

example, you can add the map type control (for switching between Map, Earth, and combined

modes) by using the following line:

Map.addControl(new GMapTypeControl());

Adding the controls when you first build the map, though, is not always useful. Sometimes the

information your users really want to look at is actually hidden behind the controls.

Of course, in order to get around this, the display area of the map can be moved, but that’s not

any fun. Instead, you can extend the functionality by building in a simple clickable button or

link that will switch the display of the controls on and off. Controls are actually objects, so

when you add a control to a map you are in fact adding an object. Conveniently, the API

provides methods on the map object to both add and remove control objects.

To achieve this, you must keep a record of the control objects you are creating before you add

them to the map. That way, you can also remove them because you have a record of the object.

For convenience, you can also create a new <div>area on your page into which you can put an

appropriate link that either enables or disables the controls, like this:

<div id=”controller”></div>

Listing 7-2 shows the JavaScript code for this.

Listing 7-2:Adding Controls to a Google Map

<script type=”text/javascript”>

//<![CDATA[

var map;

var maptypecontrol = new GMapTypeControl();

var largemapcontrol = new GLargeMapControl();

var controller;

function onLoad() {

if (GBrowserIsCompatible()) {

map = new GMap(document.getElementById(“map”));