Google Maps Api, Custom marker anchor points

Question

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

Stromberg

Answer 1

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.

Gravity

Answer 2

Since API 3.5x, using AdvancedMakerElement (or PinElement) anchor property is no more available and anchor is by default at the bottom center of the image marker. Adding a marker content 'style' allows setting anchor on the center of the marker.

// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary(
    "marker");
// Create map
const map = new Map(document.getElementById("map"), {
    center: { lat: 37.42475, lng: -122.0845 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
});
// Customize marker content
const mapPin = document.createElement("img");
mapPin.src = "mymarker.png";
mapPin.style.transform = "translateY(50%)";
// Create marker
const marker = new AdvancedMarkerElement({
  position: { lat: 37.42475, lng: -122.0845 },
  map: map,
  content: mapPin,
  title: "my marker"
  });

Caution: I don't know if this will impact the collision behavior.

Passageway

mapPin.style.transform = "translateY(50%)"; worked like a charm for me. And mine was a "svg" tag documentElement instead of "img" tag. – Zackzackariah

Answer 3

You need to specify the coordinates of the anchor clickable, it depend on the Zoom your about to be so:

https://developers.google.com/maps/documentation/javascript/markers

// Shapes define the clickable region of the icon.
  // The type defines an HTML <area> element 'poly' which
  // traces out a polygon as a series of X,Y points. The final
  // coordinate closes the poly by connecting to the first
  // coordinate.
    var shape = {
        coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 15, 49, 16, 49, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
        type: 'poly'
    };
    var iconImage=  new google.maps.MarkerImage(
                             // URL
                             "images/Italian Flag Mine New.png",//желательно название картинки поменять, чтобы было без пробелов
                             // (width,height)
                             new google.maps.Size(32, 49),
                             // The origin point (x,y)
                             new google.maps.Point(0, 0),
                             // The anchor point (x,y)
                             new google.maps.Point(9, 49)
                            );
 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,
      shape: shape
     });

Maidenhair