Google Map marker offset

Question

I am using google maps version 3. I want to show a square marker. Currently google shows it like the following image. i.e. the point is taken at the bottom of the marker. My marker is suppose 20px X 20px. Currently google shows it at the red point.

Now I need to show the marker slightly down. i.e. point should be taken not at bottom but middle. Like it is shown in the picture below.

I have tried, anchor, anchorPosition, anchorPoint, still no luck.

Can anyone point me out the exact way to do this?

EDIT Below is my code,

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

I tried with lat: 23.038645, lng: 72.511895 which is in Ahmedabad, Gujara, India. But after zoom out is shows point in Afghanistan.

Answer 1

Per the documentation, this works:

var icon = {
  url: "https://i.sstatic.net/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: "https://i.sstatic.net/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>