IndexSizeError using google maps v3: using google.maps.Marker

问题

I'm creating a page with jquery and google maps v3 and I'm trying to show a marker on a google maps. For some reason I'm getting an error with Firefox (and the marker isn't showing on the map):

Error: IndexSizeError: Index or size is negative or greater than the allowed amount Source 
File: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/17/main.js
Line: 96

Facts: * It works in Safari * It works if I change the MarkerImage url

Code that I'm using to add the marker is the following:

var marker = new google.maps.Marker({
    map: map,
    icon: new google.maps.MarkerImage(
        "/gfx/icons/poi.png",
        new google.maps.Size(22,22),
        new google.maps.Point(0,0),
        new google.maps.Point(11,11),
        new google.maps.Size(22,22)),
    position: point
});

My test can be visible here:

http://geoape.com/_wp.php

回答1:

It seems that the problem is in the google.maps.MarkerImage object, in the fifth (scaledSize) parameter to be exact in cases where the actual size of the image is not as defined in the code. For some reason Firefox cannot handle scaling if the image size is incorrectly defined and scaledSize matches actual size but doesn't match the image size.

to be more precise: image /gfx/icons/poi.png is not 22 x 22px but 30 x 30px. So to overcome this problem there are three solutions:

• a) change the second parameter accordingly (size to google.maps.Size(30,30));
• b) change the fifth parameter accordingly (scaledSize to google.maps.Size(30,30));
• c) remove the fifth parameter (new google.maps.Size(22,22)) that would resize the marker image.

in case of a) the markerImage will be scaled to the defined size (22x22), in case of b) and c) the 22x22 would be cropped out of the original 30x30 size.

来源：https://stackoverflow.com/questions/12909632/indexsizeerror-using-google-maps-v3-using-google-maps-marker