» It’s all about Ankit and Web! «

Let’s Digg into Google Maps

The Web would not be so simpler and interactive without Ajax. This technology makes Web applications pleasant, interactive, quick responsive and light weight. Take any of the online map applications, no matter whether it is Yahoo Maps, Google Maps or Windows Live Local, and you will find awesome precession, cutting edge technology (beyond DHTML, XML and JavaScript) well managed data. Being software developer, these always attract me and I want to understand the scene behind those best software architectures/implementations. Over the last few days I was studying (hacking) Google maps and wanted to see how it works? Here are my investigations.

Tiles: The very first observation is – not whole map is fetched at once. Instead the entire map is divided into tiles and a series of Ajax requests are fired to retrieve some part of the actually map. As soon as a tile is fetched it is displayed at its position. Their position is well calculated no matter user drags the maps while requests are on the way. The benefit here is, the user interface remains responsive and it makes user eager to analyze an area of map as soon as it’s available.

Overlaying: The tiles can be considered basic unit of mapping applications. They are atomic and have minimal required information. The DHTML allows overlapping one tile (image) over another and makes development easier. Here is how.

For each type of data there exists an independent tile. The Ajax application retrieves these tiles and overlaps one above another. For example – the user requests to see map and satellite image together, and here is how the rendered image is showed.

Here the difference in the requests is of a single parameter ‘v’ and as per my guess its ‘version’. The next parameter ‘t’ seems a combination of zoom index, and the corner coordinates. For tiles of type map having some text, their language can be controlled using ‘hl=en’. Try using ‘hl=ru’ and you can see difference. So, the JavaScript executing in the client’s browser has complete control over what to display.

Ajax: Probably this needs to be the first point I should discuss. Google Maps does not use XMLHttpRequest for making Ajax calls. Instead, they have used I-FRAME (iFrame) for preloading images. When you use Firebug you won’t be also to trace any XMLHttpRequest calls. I think the reason for this would be the difficulty in using and image/jpeg response from XMLHttpRequest as an image object and display it in browser.