Esa's Google Maps API experiments.
Sprites. Obey your custom marker icon thirst.
Sprites are are a fascinating technique for handling icon image sets. Now it is available in GMaps API. Hosting of large image sets is no more a nightmare. Also preloading of separate icon images is avoided. Less http requests, faster loading.
'Sprite' was an everyday word in computer graphics during the 8-bit era. It meant a graphics object that was movable over the background. Computers like Commodore 64 had a special circuitry in their hardware that made sprites possible. All those funny moving creatures were sprites. Violent creatures came later.
At some point it was invented that you can display just a certain part of a sprite. We can have a single image that contains a grid of all the icons we need. Only certain part of the image is shown.
maps.google.com has been using sprite technology for a long time for the business result markers. Backgrounds of the buttons on the page are sprites too. Infowindow bubble is also formed from a single image.
Sprite technology for markers has been available with api since v2.119. Only vertical sprites are supported so far.
GIcon() has a property called .sprite. It is an object with two properties sprite.image and sprite.top. (Url of the image file and the vertical offset)
The marker image used on this page is 340px high and it contains ten markers. So the .top property is set in 34px steps.
See what happens with random top value.
I would recommend composing a function for sprite handling. Something like:
function sprite(number){
var icon = new GIcon(G_DEFAULT_ICON);
icon.sprite = {};
icon.sprite.image = "mysprite.png";
icon.sprite.top = number * 34;
return icon;
}
Note that sprite property is so far undocumented and thus not recommended to use on serious pages. Experimental use is strongly recommended. Star the request if you want sprite to be documented.
