Chapter 10 — Overlaying Statistical Data 185
XML document, picking out the city information, latitude and longitude of each city, and then
use this when generating a marker for the city on the map:
function onLoad() {
if (GBrowserIsCompatible()) {
infopanel = document.getElementById(“infopanel”);
map = new GMap(document.getElementById(“map”));
map.centerAndZoom(new GPoint(0,0), 2);
var request = GXmlHttp.create();
request.open(‘GET’,’ch10-01.xml’, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlsource = request.responseXML;
var markerlist = ;
xmlsource.documentElement.getElementsByTagName(“city”);
for (var i=0;i < markerlist.length;i++) {
addmarker(parseFloat(markerlist[i].getAttribute(“lng”)),
parseFloat(markerlist[i].getAttribute(“lat”)),
markerlist[i].getAttribute(“title”));
}
}
recenterandzoom(points);
}
request.send(null);
}
}
Two other functions in that function are required for it to work,addmarker()and
recenterandzoom().
Adding Markers
The addmarker()function is identical to examples shown in Chapter 7. It just accepts the
latitude and longitude of a point, generates the GPoint()variable, pushing each value onto a
stack for later use, and then creates a GMarkerand updates the global information panel with
the supplied title. The purpose of the panel is to provide a simple method of centering the map
on each of the markers.
function addmarker(x,y,title) {
var point = new GPoint(parseFloat(x),parseFloat(y));
points.push(point);
var marker = new GMarker(point);
map.addOverlay(marker);
infopanel.innerHTML = infopanel.innerHTML +
‘<a href=”#” onClick=”movemap(‘ + index + ‘);”>’ +
title +
‘
’;
index++;
}
The movemap()function referenced here performs a pan to the point’s longitude and latitude
when the city name is clicked.