Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save umkasanki/60ce5890213a417f044f44934ec2ed35 to your computer and use it in GitHub Desktop.
Save umkasanki/60ce5890213a417f044f44934ec2ed35 to your computer and use it in GitHub Desktop.
Google Maps v3 Custom retina marker from a sprite sheet with 2x and 3x support
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
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment