Google maps API: Marker image positioning

Question

I have changed the image that I use for a marker on Google maps. The new image is much wider than the old one and I have noticed that the marker is aligned with the lat and lng so that the marker rests with it's horizontal midpoint over the lat and lng. This is not what I want, I want to have the lat and lng aligned with the markers left hand side - I want to offset the marker from the default position by about 80px to the right.

Padova

Answer 1

Try this on for size.

var markerImage = new google.maps.MarkerImage('/img/icon/here.png',
    new google.maps.Size(80, 80), //size
    new google.maps.Point(0, 0), //origin point
    new google.maps.Point(0, 80)); // offset point
marker[stamp] = new google.maps.Marker({
    position: loc, // loc is a variable with my lngLat object
    title: params.name,
    map: window.gMaps[params.map],
    icon: markerImage
});

Blizzard

Answer 2

You want the 'anchor' property of MarkerImage. Note that the origin property comes before anchor in the constructor call. If you're not using sprites, you can just send null for the optional parameters.

If your marker is 80x60 and you want the anchor in the middle of the left side, create it like this:

var markerImage = new google.maps.MarkerImage('customIcon.png', new google.maps.Size(80, 60), null, new google.maps.Point(0, 30));

See also Google's example.

Gruber