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
});
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With