Смещение маркера Google Map

Question

Я использую карты Google версии 3. Я хочу показать квадратный маркер. В настоящее время google показывает это как следующее изображение. т. е. точка берется в нижней части маркера. Мой маркер - 20px X 20px. В настоящее время Google показывает это в красной точке.

Теперь мне нужно, чтобы показать маркер немного вниз. то есть точка должна быть взята не внизу, а в середине. Как показано на рисунке ниже.

Я попытался, якорь, anchorPosition, anchorPoint, до сих пор не повезло.

Может ли кто-нибудь указать мне, как это сделать?

EDIT Ниже мой код,

icon = { 
       url: "/app/image/map_pin/marker-90.png", 
       size: new google.maps.Size(32, 33), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(50,50) 

      } 


this.makeMarker(this.map,LatLong, icon); 


makeMarker(map: any, lat: number, lng: number, icon: string) { 
     new google.maps.Marker({ 
      map: map, 
      icon: icon, 
      animation: google.maps.Animation.DROP, 
      position: { lat: lat, lng: lng } 
     }); 
    } 

Я попытался с lat: 23.038645, lng: 72.511895, который находится в Ахмадабаде, Gujara, Индия. Но после уменьшения масштаба это указывает на Афганистан.

Answer 1

Per the documentation, это работает:

var icon = { 
    url: "http://i.stack.imgur.com/FhryS.png", // 20px x 20px icon 
    // size: new google.maps.Size(20, 20), // size of icon is 20px x 20px (so this isn't required) 
    // origin: new google.maps.Point(0, 0), // this is the default and isn't needed 
    anchor: new google.maps.Point(10, 10) // anchor is in the center at 10px x 10px 
} 

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var icon = { 
 
    url: "http://i.stack.imgur.com/FhryS.png", 
 
    anchor: new google.maps.Point(10, 10) 
 
    }; 
 
    makeMarker(map, map.getCenter().lat(), map.getCenter().lng(), icon); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function makeMarker(map, lat, lng, icon) { 
 
    new google.maps.Marker({ 
 
    map: map, 
 
    icon: icon, 
 
    animation: google.maps.Animation.DROP, 
 
    position: { 
 
     lat: lat, 
 
     lng: lng 
 
    } 
 
    }); 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>