Google Maps v3 Custom retina marker from a sprite sheet with 2x and 3x support

gistfile1.js

var hqLocation = new google.maps.LatLng(-35.107231, 147.369983);

var mapOptions = {
  zoom: 17,
  minZoom: 17,
  maxZoom: 17,
  center: hqLocation,
  scrollwheel: false,
  disableDefaultUI: true,
  keyboardShortcuts: false,
  draggable: true,
  disableDoubleClickZoom: true
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

// Retina support
var requireImagePrefix = "";
var devicePixelRatio = (window.devicePixelRatio===undefined?1:window.devicePixelRatio);

if(devicePixelRatio > 2) {
  requireImagePrefix = "@3x";
}
else if(devicePixelRatio > 1) {
  requireImagePrefix = "@2x";
}

// Image for the marker
// scaledSize are the dimensions of the 1x sprite
var pinImage = {
  url: "/assets/sprite" + requireImagePrefix + ".png",
  size: new google.maps.Size(15, 36),
  scaledSize: new google.maps.Size(580, 310),
  origin: new google.maps.Point(430, 20),
  anchor: new google.maps.Point(7, 34)
};

// The optimised flag is important
var officeMarker = new google.maps.Marker({
  position: hqLocation,
  map: map,
  title: "Anomaly HQ",
  icon: pinImage,
  optimized: false
});

Thanks for posting this! It helped me get my retina markers working in a project. I didn't see the scaledSize or optimized attributes in Google's docs anywhere but that was the secret magic that I needed. Thanks again!