CODEWITHSUNDEEP
google-maps-api-3
Devraj
Devraj

Reputation: 3065

Google maps custom marker icon configuration from sprite sheet with retina support

My Google map uses a custom Marker pin loaded from a sprite sheet, everything works as expected for 1x, 2x, and 3x displays expect @2x, and @3x the image shows up as twice of three times the size of the original image.

If I try and scale it back to to the 1x dimensions when displaying at @2x and @3x the marker shows up without the image.

Googleing around suggests that I am doing everything right, Icon configuration is based on the documentation.

Is anyone able to spot what might be wrong with my scaledImage configuration?

if(devicePixelRatio > 1) {
  pinImage['scaledSize'] = new google.maps.Size(15, 36);
}

Code extract from JavaScript:

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 = "@2x";
}
else if(devicePixelRatio == 3) {
  requireImagePrefix = "@3x";
}

// Image for the marker
var pinImage = {
  url: "/assets/sprite" + requireImagePrefix + ".png",
  size: new google.maps.Size(15*devicePixelRatio, 36*devicePixelRatio),
  origin: new google.maps.Point(430*devicePixelRatio, 20*devicePixelRatio),
};

if(devicePixelRatio > 1) {
  pinImage['scaledSize'] = new google.maps.Size(15, 36);
}

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

Thanks very much for your time.

Upvotes: 1

Views: 549

Answers (1)

Devraj
Devraj

Reputation: 3065

My error in the above are:

  • The scaledSize parameter is meant to be the dimensions of the 1x sprite
  • We don't need to multiply the size and origin parameters by the aspect ratio

I have posted the updated solution as a Git oh Github

Upvotes: 1

Related Questions