AJAX and Google maps

An Example

The fundamental philosophy of AJAX is to load the static parts of your webpage only once, and request a small amount of information about the bits that change from a server. This makes changing the displayed data much faster.

I have access toPHP on this webserver but I will not dwell on the server side workings, that is up to you! In your application you could use a PHP, PERL, ASP, or any server side language to respond to a query based on user input or map position.

The first thing to do is set up a function to query the server and then generate some linked markers on the map based on the xml returned. The function readMap(url) basically is a wrapper for GDownloadUrl (documentation here). and some javascript to parse the xml returned.

function readMap(url) {
GDownloadUrl(url, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var link = 'http://melbourne.localhero.biz/article/permatitle/' + markers[i].getAttribute("permatitle") + '/';
var marker = createMarker(point,link,markers[i].firstChild.nodeValue)
map.addOverlay(marker);
}
}
);
}

The second function is a listener to assemble some variables (the southwestern and northeastern bounds of the map), the session id etc and send them in as the url in the function we created above. Notice readMap(url) is called in the last line of the below function.

GEvent.addListener(map, "moveend", function() {
var bounds = map.getBounds();

var southWest = bounds.getSouthWest();
var southWestlat = southWest.lat();
var southWestlng = southWest.lng();
var southWeststring = southWestlat.toString() + '_' + southWestlng.toString();

var northEast = bounds.getNorthEast();
var northEastlat = northEast.lat();
var northEastlng = northEast.lng();
var northEaststring = northEastlat.toString() + '_' + northEastlng.toString();

var URLstring = 'http://melbourne.localhero.biz/map/xsl/index_marker/sess_random/rS9O1k9P/southwest/' + southWeststring + '/northeast/' + northEaststring + '/category_record_title/melbourne_gardens/';

document.getElementById("message").innerHTML = URLstring;

readMap(URLstring);
}
);

Finally we must set the centre of the map and let the above functions do their work:

map.setCenter(new GLatLng(-37.81731028,144.96698141), 15);
var point = new GLatLng(-37.81731028,144.96698141);
var marker = create_spot_Marker(point,'home', icon);
map.addOverlay(marker);

A working example of this approach is available here: http://localhero.biz/
please note the application is currently in development but the javavscript approach will remain the same.

Non-AJAX Philosophy

There's a temptation to write server side PHP or ASP script to generate the whole HTML page from scratch every time the data changes, generating a whole new set of HTML with the location specific information coded into Javascript commands. It works, but it means that a lot more data has to be sent from the server to the client, and the whole of the API code has to be reloaded, and, depending on the browser settings, it may mean that some or all of the map tiles, marker images and web page images get reloaded.

Note: I am not a javascript expert. For this reason I have kept this article publicly editable. Please feel free to correct any innaccuracies or ommissions.

Copyright 2007 LocalHero.