Google map custom markers Retina resolution

Question

I'm developing an iPhone app in html5 and making the build with Phonegap. In the app there's a Google map with custom markers, the way the marker icons are created is as follows:

var image = new google.maps.MarkerImage("hat.png", null, null, null, new google.maps.Size(20,30));
var shadow = new google.maps.MarkerImage("shadow.png", null, null, null, new google.maps.Size(20,30));

var marker = new google.maps.Marker({
                 map: map,
                 position: latlng,
                 index: markers.length,
                 icon: image,                     
                 shadow: shadow,
                 animation: google.maps.Animation.DROP,
                 html: htmlContent                                                
             });

The actual size of the icon's are double size compared to the sizes defined in the code. This is done to make sure the icons are shown in high res on the Retina display. The code above worked fine until today, but what happens now is the following.

When the icons Drop down, using the google.maps.Animation.DROP, the icon is shown in high res on the way down, but when the icon "lands" on the map, the icon switches to a low res resolution version.

Has anyone ever experienced the same?

Thank you...

UPDATE Found out that if I specify the Google map version like:

http://maps.googleapis.com/maps/api/js?v=3.0

So I guess it's a bug in the newest Goolge map API.

Answer 1

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

Answer 2

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.