CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3css-spritesretina
Laurent Veys
Laurent Veys

Reputation: 133

Custom google maps marker from sprite and retina proof

I've learnt that when I would like to use sprites as google Map markers, I need to put it like this:

var myIcon = new google.maps.MarkerImage(
    "../public/img/categories.png",
    new google.maps.Size(90, 50),
    new google.maps.Point(0, data[i].subcategory_id * 50)
);

// as I understand: 
// new google.maps.MarkerImage(url, original size, anchor point);

when making it retina-proof, I understand I need to make it like this:

//new google.maps.MarkerImage(url, original size, anchor point, null, half size);
var myIcon = new google.maps.MarkerImage(
    "../public/img/categories.png",
    new google.maps.Size(90,50),
    new google.maps.Point(0, data[i].subcategory_id * 50),
    null,
    new google.maps.Size(45,25)
);

However, when adding the extra size, my marker isn't there anymore. What am I doing wrong?

Upvotes: 3

Views: 7046

Answers (3)

andrewb
andrewb

Reputation: 5339

Yes, using the google.maps.Icon class is the way to go.

A full demonstration of adding a marker with proper handling for sprite image base, Retina support, and non-default anchoring:

var marker = new google.maps.Marker({
    position: latLng,
    title: 'My Marker',
    map: myMap,
    // google.maps.Icon
    icon: {
        url: 'img/marker.png',

        // base image is 60x60 px
        size: new google.maps.Size(60, 60),

        // we want to render @ 30x30 logical px (@2x dppx or 'Retina')
        scaledSize: new google.maps.Size(30, 30), 

        // the most top-left point of your marker in the sprite
        // (based on scaledSize, not original)
        origin: new google.maps.Point(0, 0),

        // the "pointer"/anchor coordinates of the marker (again based on scaledSize)
        anchor: new google.maps.Point(25.5, 29)
    }
});

A demo by Google exists here.

Upvotes: 1

Chris Andersson
Chris Andersson

Reputation: 1301

This have been updated:

scaledSize: The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.

size: The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set when the image loads.

So now it should be:

var myIcon {
  url: "../public/img/categories.png",
  size: new google.maps.Size(90,50), // the orignal size
  scaledSize: new google.maps.Size(45,25), // the new size you want to use
  origin: new google.maps.Point(0, 25) // position in the sprite                   
};

Upvotes: 0

Laurent Veys
Laurent Veys

Reputation: 133

Like @duncan said, I need to use the icon class.

var myIcon {
  url: "../public/img/categories.png",
  size: new google.maps.Size(45,25), // the size it should be on the map
  scaledSize: new google.maps.Size(45,550), // the normal size of the image is 90x1100 because Retina asks double size.
  origin: new google.maps.Point(0, 25) // position in the sprite                   
};

This helped me out, thank you!

Upvotes: 3

Related Questions