Firefox & Google Map API v3 : IndexSizeError

Question

I've got some troubles since a few days or a few weeks with a Google Map (using v3) in Firefox 20.0 (works well in Google Chrome), whereas it worked well before. When I load the markers dynamically (loaded from database with Ajax), I have in my console (Firebug) :

IndexSizeError: Index or size is negative or greater than the allowed amount
(102 out of range 43)

I thought that there was a link with scaling images (saw this post), but it seems not. I've tried to set other width and height in second and fifth parameters of the MarkerImage. Same errors.

Edit : I notice that when I don't precise the ScaledSize, there's no error. It means that Firefox can't resize my pictures, but... I need to ! :(

There's a lot of code, and since the errors are shown in the console when markers are loading, I'll show you for the moment the code that corresponds to it :

$.each(data, function(i) {
    // Where "data" is the json result of my ajax call
    var largeur = 80 + (20 * (map.getZoom() - 9));
    var ratio = largeur / 80;
    var hauteur = 56.8 * ratio;

    var marker = new google.maps.Marker({
        map: map,
        icon: new google.maps.MarkerImage("../images/realisations/" + data[i].image,
           new google.maps.Size(largeur, hauteur),
           new google.maps.Point(0, 0),
           new google.maps.Point(0, 0),
           new google.maps.Size(largeur, hauteur)
        ),
        position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
        title: data[i].title
    });
});

Url : here (api at the bottom of the page)

>> On the black nav, click on the checkbox which label is "Réalisations". It will cause errors in the console.

Browers :

• Firefox 20.0 : errors...
• Google Chrome 26.0 : works
• IE 9 : works
• Safari 5.1.7 : works
• Opera 12.14 : works

Can someone help me ?

Answer 1

For firefox to work properly, you need to define 4 parameters of the icon to get it to scale properly.

1.) set the url (obviously)
2.) set the size (this NEEDS to be the original image size in pixels)
3.) set the scaledSize (this is what you want the end resulting pixel size to be)
4.) set the anchor (this should be 1/2 of the scaledSize.width by the scaledSize.height so that it attaches to the map in the bottom center of your icon)

Here's some example code that I've used:

google.maps.event.addListener(fc.map, 'zoom_changed', fc.zoomChanged);
...
...
zoomChanged : function() {
        var scaleRatio,zoom,i,iconImg,img_element,t,newScaledSize;
        scaleRatio = 1;
        zoom = fc.map.getZoom();
        if(zoom < 15) {
            //from zoom level 15+, make it full size, at 15-, reduce icon size by 15% each zoom level
            scaleRatio = 1 - ((15 - zoom) * 0.15);
        }

        if(scaleRatio < 0.05) {
            scaleRatio = 0.05;
        }

        //change the size of the icon
        for(i=0;i<fc.markers.length;i++) {
            if(fc.markers[i] != null) {
                iconImg = $('img[src="'+fc.markers[i].getIcon().url+'"]');
                img_element = iconImg.get(0);
                t = new Image();
                t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
                newScaledSize = new google.maps.Size(Math.ceil(t.width*scaleRatio), Math.ceil(t.height*scaleRatio));
                if(!newScaledSize.equals(fc.markers[i].getIcon().scaledSize)) {
                    var anchor = new google.maps.Point(Math.ceil(newScaledSize.width*0.5), newScaledSize.height);
                    console.log('anchor: '+anchor);
                    fc.markers[i].setIcon({
                        url : fc.markers[i].getIcon().url,
                        anchor : anchor,
                        size : new google.maps.Size(t.width, t.height),
                        scaledSize : newScaledSize
                    });
                }
            }
        }
    }

Answer 2

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 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: cObject.getIcon().url,
                        scaledSize: new google.maps.Size(icoSize, icoSize-1),
                        size:new google.maps.Size(64, 64)
                    });

---