Question

For a Christmas Market, I’m currently working on a Google Maps map. I load a sprite of different icons representing the market boothes in their different sizes:

(the greyed out version is for deactivated status):
http://www.felixkittler.de/area51/googlemaps/buden.html

Everything works fine so far, as long as the user does not zoom in or out – if so, the boothes are not scaled and consequently seem far too big or small.

I thought I might predefine another set of icons, containing the same markers, but with scaled markerImages. Unfortunately, I can’t get this to work:

for(i=0; i<markerSizes.length; i++){
    var aktiv = new google.maps.MarkerImage(
        "http://www.felixkittler.de/area51/googlemaps/buden/SPRITE.png", 
        new google.maps.Size(markerSizes[i], 27, "px", "px"),
        new google.maps.Point(85, i*30),
        new google.maps.Point(0, 0),
        new google.maps.Size(markerSizes[i]*2, 14) //this doesn't work!!!
    );
    gicons_aktiv.push(aktiv);
}

I do not yet track the zoom_changed event, but I set up a version of my file which should use the scaled icons:
http://www.felixkittler.de/area51/googlemaps/buden_scaled.html
(scaling up (x2) in lines 116 & 125).

Any ideas how to solve this problem?
Since this is not the only sprite I’m using, I would like to avoid uploading multiple resolutions of the same sprite, scaling up or down would be much more convenient.

Thanks!!!

Answer 1

So, I just found out by myself.
Thanks to Marc Ridey for this blog post!

Marker Image for original size:

var original = new google.maps.MarkerImage(
    "http://www.path/to/sprite.png", 
    new google.maps.Size(markerSizes[i], 24), //marker height=24, width in array
    new google.maps.Point(0, i*30), // each row of the sprite grid is 30px tall
    new google.maps.Point(0, 0),
    null // use file dimensions 168 x 270px
);

Marker Image for displaying marker scaled 50% down:

var half = new google.maps.MarkerImage(
    "http://www.path/to/sprite.png", 
    new google.maps.Size(markerSizes[i]/2, 12),
    new google.maps.Point(0, i*15),
    new google.maps.Point(0, 0),
    new google.maps.Size(84, 135) // original dimension of sprite: 168 x 270 px
);

Hope this helps anyone (: