Google Maps API Tutorial

© 2006, 2007, 2008, 2009 Mike Williams

Translate this page:


The AJAX Philosophy

Note: It's possible to use the basic philosophy behind AJAX without necessarily using ajaxslt.js or any of the specific technologies that happen to be mentioned in the AJAX acronym (Asynchronous Javascript And XML).

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.

My new website does have PHP, so this example now uses it. Clicking the [A], [B] and [C] buttons causes the current markers to be cleared and a fresh set of information to be loaded from the corresponding XML file.

Here's what the source of the PHP server script looks like PHP script, and here's the server script actually running: map11.php?q=a, map11.php?q=b, map11.php?q=c.

In a real application you could use a server side script to respond to a query based on user input or map position. The Javascript would construct a query string to be sent to the server containing all the relevant information and pass a URL something like 'myserver.php?lat=-123.5&lng=44.2&zoom=11&selection=houses,schools,hotels'. The server would search the database for location information that matches the query and output XML code rather than HTML.

Here's a really simple PHP script that reads this data file, finds the marker that's "nearest" to the ?lat= &lng= parameters that are passed in the URL, and outputs the data as XML. [Somebody with more experience in PHP could probably write it a lot better than that].

Here's that script in action map11a.php?lat=43.85&lng=-79.1

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.

You can see the difference by reloading the example page, instead of clicking on the [A] icon.

Back to Mike's Homepage
Up to the start of this tutorial