Google map custom markers Retina resolution

I found my solution to this by using scaledSize instead of size to define the width and height of the image.

I just found this problem too. The bug appears to be in latest (v3.7) of their API, so if you specify v3.6 via the URL parameter ?v=3.6 it'll work fine.

Update: In version 3.8+ (I think) you can use optimized: false to force a retina image, if you are using one. This is because optimized: true takes all your sprites and weaves them together into a master sprite. This means you should only do this if you have very few markers. Also, doesn't work too well with Clusterer.

The default is now optimized: true, which will determine first if the device can even handle rendering so many high-res icons before creating a master sprite at a higher resolution. For example, load a map with a lot of markers on a retina Macbook Pro, and they'll appear high-res, but try an iPhone 4 and it will not. If you force the iPhone 4 using optimized: false, and have a lot of markers, it might stutter a lot. Not sure about the 4S but I assume it'll probably use the higher res version as it has a lot better processing capability.

Simply use an object with url, size, and scaledSize attributes:

var icon = {
    url: 'path/img/[email protected]',
    size: new google.maps.Size(30, 40),
    scaledSize: new google.maps.Size(30, 40)
};

Where path/img/[email protected] is a 60px x 80px PNG.