Marker off-set on Google Map API v3

Question

I\'ve created a simple map with custom PNG markers. Is it possible to offset the attached PNG image? There does not seem to be any mention of an \'offset\' in the Google Ma

Answer 1

As of v3.10, the MarkerImage class has been deprecated, the Icon anonymous object should be used instead. From the documentation

Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in version 3.10, and replaces MarkerImage from version 3.11 onwards.

For example:

var marker = new google.maps.Marker({
  map:map,
  position: map.getCenter(),
  icon: {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
  }
});

example fiddle

code snippet"

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions)
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
      url: "http://i.stack.imgur.com/PYAIJ.png",
      size: new google.maps.Size(36, 36),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(18, 18),
      scaledSize: new google.maps.Size(25, 25)
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  width: 100%;
  height: 100%;
}

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

Answer 2

For v3, this is how I accomplished it:

var image = new google.maps.MarkerImage("images/car1.png",
    new google.maps.Size(60, 60),
    new google.maps.Point(0,0),
    new google.maps.Point(30, 30)
);

//ADD MARKER AT EACH POINT
var marker = new google.maps.Marker();
marker.setPosition(new_point);
marker.setIcon(image);
marker.setZIndex(0);
marker.setMap(map);

Answer 3

I was looking for just this option and found a sample here:
http://econym.org.uk/gmap/custom.htm

Setting iconAnchor (on the marker data actually) worked for me.

   var Icon = new GIcon();
      Icon.image = "mymarker.png";
      Icon.iconSize = new GSize(20, 34);
      Icon.shadow = "myshadow.png";
      Icon.shadowSize = new GSize(36, 34);
      Icon.iconAnchor = new GPoint(5, 34);
      Icon.infoWindowAnchor = new GPoint(5, 2);
      Icon.transparent = "mytran.png";

Answer 4

The anchor option on the MarkerImage class lets offset the marker image from the middle center position on the marker's lat/lng:

'anchor' overrides the position of the anchor point from its default bottom middle position