Help me understand how google maps show images ?

Question

With firebugs net tab open i stated zooming in and out of google map and i found its making requests for the png images.

Ok with this i understood that we can request the images using the Ajax. but wait ? i always used to request html, jsox, txt and xml. Image ........ its strange for me ? Can some one please elaborate on this ?

Also i would like to know if text is downloaded we add it to some DOM element and it show up. How images retried from the ajax can be accessed ?

Any help or pointer will be great help :)

Answer 1

GMaps doesn't make XMLHttpRequests to get the images. They instead use a normal <img /> element that is injected via javascript.

They then use the "onload" and "onerror" events to detect if the image was loaded correctly.

They retry a download of the image if it times out. This is achieved by setting a timer and once it expires re-setting the src property of the image.

var tile = document.createElement('img');
var url = 'http://sometilehost/X.Y.Z.png';
var downloadTimeout = 10000;    // Retry in 10 seconds

// Tile downloaded successfully
tile.onload = function (e) {
    window.clearTimeout(tile.downloadTimer);
    alert('tile downloaded');
};
// The tile couldn't be downloaded. 404, 503 ...
tile.onerror = function (e) {
    window.clearTimeout(tile.downloadTimer);
    alert('tile not downloaded');
};
// This will fire if the tile doesn't download in time
tile.downloadTimer = window.setTimeout(function () {
    tile.src = url; // Start the download again
}, downloadTimeout);
tile.src = url;