Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps Api, Custom marker anchor points

I have created a custom marker for use in my google map. The anchor point of the icon should be in the bottom left hand corner. On my map, the anchor points appear to be on the bottom edge in the center of the icon. The icon is 32 x 49. The code I have included places all of my markers. I have searched for hours and cannot find any answers. The V3 api says the property is anchor. When I use that property no markers show on the map.

var iconImage = "images/Italian Flag Mine New.png";

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(45.067314, 7.697774),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var iconImage = {
    url: "images/Italian Flag Mine New.png",
    anchorPosition: (0, 49)
};

//var iconImage = {url: "images/Italian Flag Mine New.png",
//               anchor :  (0,49)};

var marker, i, savedMarker;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][latIndex], locations[i][lngIndex]),
        map: map,
        animation: google.maps.Animation.DROP,
        icon: iconImage
    });
}
like image 302
user3242810 Avatar asked Feb 02 '14 00:02

user3242810


1 Answers

The anchor property is part of the marker constructor, but you still must create an instance of the object according to Google's documentation (under "Complex Icons" heading). Give this a try:

var iconImage = {
  url: "images/Italian Flag Mine New.png",
  anchor: new google.maps.Point(0,49)
};

You should also consider specifying the size property.

like image 53
pjfamig Avatar answered Oct 11 '22 01:10

pjfamig