Google Maps v3 custom marker icon does not keep it's position on map

Question

Developing with Google Maps v3.

For some sort of reason, my custom marker icon "change" it's position on zoom in-out. It looks like it have some sort of "padding" property, that not changes together with zoom.

It means that it position is correct on maximum zoom (18), but if I change zoom value, it "moves" a bit to top, and it makes problem on smaller zoom values, because it looks like it is not on same position as it is.

Marker is defined as:

var image = new google.maps.MarkerImage('img/antennas/img.png',new google.maps.Size(100, 100));

This maybe can help: marker icon is squared shape, 100x100px, and it's center is in middle of the image, not on the bottom like "normal" markers.

UPDATE: do I have to do something with anchor property?

Answer 1

You have to set the anchor of the marker. The default is center bottom.

See http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerImage

Answer 2

Instead of using only a Marker, use also a MarkerImage, to be used as the marker.

In this example I use a mark that is a circle with a point in the middle, so I always want it centered.

Example

 var marker_image = new google.maps.MarkerImage(
        '../Media/icon_maps_marker.png',
         null,
         // The origin for my image is 0,0.
         new google.maps.Point(0, 0),
         // The center of the image is 50,50 (my image is a circle with 100,100)
         new google.maps.Point(50, 50)
     );
    var marker = new google.maps.Marker({
        clickable: true,
        map: map,
        position: center_location,
        icon: marker_image,
    });