Question

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

Answer 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 (22×22), in case of b) and c) the 22×22 would be cropped out of the original 30×30 size.