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?

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?

• javascript
• google-maps
• google-maps-api-3
• css-sprites
• retina

Share Improve this question Follow edited Sep 30, 2014 at 9:12 JamesG 1,69822 gold badges2828 silver badges4242 bronze badges asked Apr 22, 2014 at 12:21 Laurent VeysLaurent Veys 13311 silver badge1111 bronze badges 2

• 3 The MarkerImage class is deprecated and you should use the Icon class instead. See developers.google./maps/documentation/javascript/… – duncan Commented Apr 22, 2014 at 12:36
• Thank you very much. I Needed to search some more, but it helped me out! – Laurent Veys Commented Apr 22, 2014 at 14:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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!

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.

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