Hacking Google Maps and Google Earth (ExtremeTech)

120 Part II — Instant Gratification

Opening an Info Window

When you added markers to the map to indicate the location of different restaurants, you actu-

ally lost the ability to identify which marker relates to which restaurant.

To resolve this issue, you can add an information window that is displayed when the marker is

clicked. The window can contain any amount of HTML and can incorporate pictures, text for-

matting, or whatever you need to display the information you want.

Listing 7-9 is a modification of Listing 7-5; it displays the three markers and adds a small title

to the information window, based on a new argument to the addmarker()function.

Listing 7-9:Adding Information Windows

<script type=”text/javascript”>

//<![CDATA[

var map;

function onLoad() {

// The basics.

//

// Creates a map and centers it on Palo Alto.

if (GBrowserIsCompatible()) {

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

map.centerAndZoom(new GPoint(-0.64,52.909444), 2);

addmarker(-0.6394,52.9114,’China Inn’);

addmarker(-0.64,52.909444,’One on Wharf’);

addmarker(-0.6376,52.9073,’Siam Garden’);

}

}

function addmarker(x,y,title) {

var point = new GPoint(parseFloat(x),parseFloat(y));

var marker = new GMarker(point);

GEvent.addListener(marker,

‘click’,

function() {

marker.openInfoWindowHtml(‘<b>’ + title + ‘</b>’);

}

);

map.addOverlay(marker);

}

//]]>

</script>