Marker off-set on Google Map API v3 - google-maps

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 Map API v3 documentation.

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

Answer 2

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

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

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