CODEWITHSUNDEEP
google-maps-api-3
speedwell
speedwell

Reputation: 655

Scaling Google Maps API v3 MarkerIcons up

I'm displaying a map with many MarkerIcons, all based on the same png but scaled to various sizes.

The base size is 64 x 64 and if I am scaling down, things work as expected.

If I am scaling up, the icons are cropped. I made a trivial JSFiddle that illustrates the issue - this is the code to scale icon. My understanding is the first size is the actual size of the source image in pixels, next two positions are the origin and anchor which I don't care about for the moment and the final size is the scaled size in pixels.

var icon_scaled = new google.maps.MarkerImage(
    img-filename,
    new google.maps.Size(64, 64),
    null,
    null,
    new google.maps.Size(scaled_size, scaled_size)
);

In the examples I found, you can omit the first size and let the browser calculate it. That works on Chrome but fails on Firefox with an error message like:

Error: IndexSizeError: Index or size is negative or 
greater than the allowed amount

Fiddle here: http://jsfiddle.net/y8E54/

How can I do this on both browsers without any errors?

BTW: I know MarkerIcon is deprecated - my experiments replacing it using 'icon' as per the docs and specifying 'size' and 'scaledSize' lead to the same kinds of issues.

Upvotes: 0

Views: 373

Answers (1)

Krishna sagar
Krishna sagar

Reputation: 144

I had the same problem and after some research and a simple workaround, I was able to fix this headache.

Here is what I did.

It seems that you need to set both the "size" & "scaleSize" attributes for this to work in FF. But then, there was one other thing which bugged me. When I set the "size" attribute to the original size of the icon, the icon scaled but cropped abruptly without showing the full icon - probably because of the size limitation.

So, I set of the "size" attribute to the max limit of the scaled img (which was 64 in my case) and it worked like a charm.

                   cObject.setIcon({
                        url: cObjects[y].getIcon().url,
                        scaledSize: new google.maps.Size(icoSize, icoSize-1),
                        size:new google.maps.Size(64, 64)
                    });

Upvotes: 1

Related Questions