Hacking Google Maps and Google Earth (ExtremeTech)

Chapter 9 — Using Overlays 171

Listing 9-16: Loading Markers for a City

function loadcity(index) {
map.clearOverlays();
message.innerHTML = ‘Restaurants in ‘ + cities[index];
infopanel.innerHTML = ‘’;
var latpoints = [];
var lngpoints = [];
var request = GXmlHttp.create();
request.open(‘GET’,’/examples/ch09-16.cgi?m=getmarkers&city=’+ ;
cities[index], true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlsource = request.responseXML;
var markerlist = ;
xmlsource.documentElement.getElementsByTagName(“marker”);
var infowindow = ;
xmlsource.documentElement.getElementsByTagName(“infowindow”);
for (var i=0;i < markerlist.length;i++) {
addmarker(parseFloat(markerlist[i].getAttribute(“lng”)),
parseFloat(markerlist[i].getAttribute(“lat”)),
markerlist[i].getAttribute(“title”),
infowindow[i],
i);
latpoints.push(parseFloat(markerlist[i].getAttribute(“lat”)));
lngpoints.push(parseFloat(markerlist[i].getAttribute(“lng”)));
}
var newcenter = calccenter(latpoints,lngpoints);
map.centerAndZoom(newcenter,2);
infopanel.innerHTML = infopanel.innerHTML +
‘
’ +
‘Back to ;
city list
’;
}
}
request.send(null);
}

The main differences are the rebuilding of the information window, a modified call to the CGI
script, and some additional steps to be executed when the markers have been added to the map.

The URL used to load the XML from the CGI script now builds a suitable request that
includes the name of the city. This will provide the CGI script with the information it requires
to return a list of restaurants in the specified city.

As each marker is added to the map, an array of the latitude and longitude points is updated.
You will use this information to relocate the map over the center point of the all of the restau-
rants for the city.

As a final step, you add a link to the city loading function so that the user can go back and
select a city again.