My First Google Map - Chicago Elementary schools
Dispite my negetive feelings about Google Map API, I still rushed to set up a website and created a bunch of rudimentary Google maps, out of the urgent need to jump on the Google broadwagen and real practical reasons. I have a little girl who is four and who will go to kindergarten next year, so I am trying all my might to find a good school for her. So as a web techie and a mom, I had to search low and high and map out all the options.
So much for the small talk. Here is the map of Chicago Elementary Schools. And the url is http://www.codexd.info/googlemaps/chicagoschools.htm
There are a few functions worth noting:
1) GDownloadUrl
I use the function to dynamically loaded chicago schools data and in the same time, passed as literal the function to process it and add the points to the map. As the following
/load chicago school data
GDownloadUrl(
"schools.txt", process_it);
// === Define the function thats going to process the text file ===process_it = function(doc, 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) {
// === split the document into lines ===var lines = doc.split("\n");
// lines.sort();var parts;
var schoolList=document.forms[0].schoolList;for (var i=1; i<lines.length; i++) {
//only elementary schoolsif (lines[i].length > 1 && lines[i].indexOf("ELEM")>0) {
parts = lines[i].split(",");
var lat = parseFloat(parts[4]);var lng = parseFloat(parts[3]);
//var html = "To be added";var label = parts[0];
// Add option to the bottom of the list
schoolList[schoolList.length] =
new Option(label, lat + "," + lng);
// alert( label + " " + lat + " " + lng);
var point = new GLatLng(lat,lng);var marker = createLabelMarker(point, label, "Coming Soon");
map.addOverlay(marker);
bounds.extend(point);
centerMap(i);
}
}
}
else if(responseCode == -1) {
alert(
"Data request timed out. Please try later.");} else { alert("Request resulted in error. Check XML file is retrievable.");
}
}
The process_it is an umbralla function that has covered layers of operations and procedures. First, it checks to ensure the httprequest for remote data has a valid return; then it parses the comma delimited text file into seperate fields and take in information such as lat, lon, school name, etc.; then it creates map markers and adds it to the basemap; and point by point, it expands the map extent and adjust the map center and zoom level.
Isn't it confusing? Deep breath.
I stole this function for centering and zooming a map dynamically by addresses.
function centerAndZoomOnBounds(bounds){
var center = bounds.getCenter();var newZoom = map.getBoundsZoomLevel(bounds);if (map.getZoom() != newZoom){
map.setCenter(center, newZoom);
}else{
map.panTo(center);
}
}
This map also includes a function for local search. And the search function is directly lifted out of the Google Map API website. The local search takes three steps, first, get the address being searched; second call the Geocoder to get the lat, and lon; third, locate the address on the map.
function showLocation() {var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
Later, I hope my maps will go beyond and deeper.