Google Maps for Custom Markers Retina Resolution

Question

I am developing an iPhone application in html5 and am building with Phonegap. The application has a Google map with custom markers, the way to create marker icons 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 is double the size compared to the sizes defined in the code. This is to ensure that the icons are displayed in high resolution on the Retina screen. The code above has worked until today, but now the following happens.

When the icons drop out using google.maps.Animation.DROP, the icon is displayed in high resolution on the way down, but when the icon "lands" on the map, the icon switches to the low resolution version.

Has anyone ever experienced the same thing?

Thanks...

UPDATE It turned out that if I specify the version of the Google map, for example:

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

So, I assume this is a bug in the latest Goolge API.

Answer 1

I also found this problem. The error seems to be in the latest version (v3.7) of their API, so if you specify v3.6 via the URL parameter? V = 3.6, it will work fine.

Update: In version 3.8+ (I think) you can use optimized: false to force the retina image if you use it. This is because it is optimized: true accepts all your sprites and combines them into a master sprite. This means that you should only do this if you have very few markers. In addition, Clusterer does not work too well.

Now optimized by default: true, which will determine first if the device can even handle so many high-resolution icons before creating a higher-resolution master sprite. For example, download a map with a large number of markers on the retina of the Macbook Pro, and they will appear in high resolution, but try the iPhone 4 and it won’t. If you force iPhone 4 to use optimized: false and have many markers, it can stutter a lot. Not sure about 4S, but I guess it will probably use a higher resolution version as it has a much better processing ability.

Answer 2

I found my solution for this, using scaledSize instead of size to determine the width and height of the image.

Answer 3

If you are faced with switching the icons to a lower resolution, this is due to the fact that api maps use the canvas to render icons (grouping them and what else?) For a faster user interface. So this is not a technical error, but it leads to errors in some browsers (for example, older ones, i.e.)

But there is a parameter that you can use to disable in MarkerOptions using optimized: false

 var marker = new google.maps.Marker({ map: map, position: latlng, icon: image, shadow: shadow, optimized: false }); 

Answer 4

The scalable size value is correct if you use Google here https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

Answer 5

Just use an object with url , size and scaledSize :

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

Where path/img/[e-mail] is 60px x 80px PNG.