CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
user198003
user198003

Reputation: 11151

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

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?

Upvotes: 9

Views: 19796

Answers (4)

huadev
huadev

Reputation: 443

See the anchor property in icon: anchor: new google.maps.Point(0, 0) 

var icon = {
    url: image,
    anchor: new google.maps.Point(0, 0)
  };

  marker = new google.maps.Marker({
    position: Latlng,
    map: map,
    icon: icon,
    optimized: false
  });

Upvotes: -1

dwbrito
dwbrito

Reputation: 5254

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,
    });

Upvotes: 6

ohaal
ohaal

Reputation: 5268

Based on your description of "padding", this sounds like it is an issue with the positioning of your MarkerImage. Try tweaking the anchor property of the MarkerImage. By default, the anchor is at the bottom center of your image. If you want the image to be centered, you will have to move the anchor down half the size of the image to center it.

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

Upvotes: 2

puckhead
puckhead

Reputation: 1891

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

Upvotes: 8

Related Questions