Another Google Map - Chicago Elementary Schools: Magnet Programs
Continuing with my google map exploration, I plotted out all elementary magnet schools (based on CPS website) on a google map. One thing different is that, instead of downloading a text file, the data that the map rests on is an xml file. And the code for parsing XML file is listed below. I also added a prettier information window.
function initialize() {if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(
new GLargeMapControl());map.addControl(new GMapTypeControl());
map.addControl(
new GMapTypeControl());map.setCenter(new GLatLng(41.940455,-87.667045), 10);
geocoder = new GClientGeocoder();
bounds =
new GLatLngBounds();baseIcon = new GIcon();
baseIcon.shadow =
"http://www.google.com/mapfiles/shadow50.png";baseIcon.iconSize = new GSize(16, 16);
baseIcon.shadowSize =
new GSize(37, 34);baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor =
new GPoint(9, 2);baseIcon.infoShadowAnchor = new GPoint(18, 25);
//load chicago school dataGDownloadUrl("data/chicagomagnetschools.xml", process_it);
}
else {alert("Sorry, the Google Maps API is not compatible with this browser");
}
}
// === Define the function thats going to process the text file ===process_it = function(data, responseCode) {
// To ensure against HTTP errors that result in null or bad data,
// always check status code is equal to 200 before processing the dataif(responseCode == 200) { var xml = GXml.parse(data);
// === split the document into lines ===var schools = xml.documentElement.getElementsByTagName("school");
for (var i = 0; i <schools.length; i++) { var schoolname, img, url, address, address2, lat, lng, image;
var nodes=schools[i].childNodes;
// alert(node.length);for (var j=0; j < nodes.length; j++)
{
switch(nodes[j].tagName)
{
case "fullname":
schoolname=nodes[j].text;
break;case "img":
img=nodes[j].text;
break;case "url":
url=nodes[j].text;
break;case "address":
address=nodes[j].text;
break;case "address2":
address2=nodes[j].text;
break;case "lat":
lat=nodes[j].text;
break;case "lng":
lng=nodes[j].text;
break;case "image":
image=nodes[j].text;
break;
}
//
// var point = new GLatLng(parseFloat(lat),parseFloat(lng));
// map.addOverlay(new GMarker(point));
}
// alert(lats[i]);var point = new GLatLng(parseFloat(lat),parseFloat(lng)); var info="<div align=center><img src=" + img + "><br><a href=" + url + ">" + schoolname + "</a><br><br>" + address + "<br>" + address2+ "</div>";
// map.addOverlay(new GMarker(point));var marker=createMarker(point,image,info);
map.addOverlay(marker);
}
}
else if(responseCode == -1) { alert("Data request timed out. Please try later.");
}
else
{
alert("Request resulted in error. Check XML file is retrievable.");
}
}
function createMarker(point, image, info) {var icon = new GIcon(baseIcon);
icon.image = image;
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(info);
});
return marker;
}
The online map is availabe at here: http://www.codexd.info/googlemaps/chicagomagnetprograms.htm
The XML data file is availabe at here: http://www.codexd.info/googlemaps/data/chicagomagnetschools.xml