Le problème du rendu des images sur les écrans à haute densité de pixels (Retina, chez Apple) est maintenant bien connu, ainsi que les techniques pour l’éviter.

Cependant, dans le cas d’une Google Map et des icônes (ou “marker”) qu’on peut lui associer, c’est un peu différent, du moins à première vue.

Voici la méthode pour rendre compatible les “custom icons” de l’API Google Maps avec les écrans à haute densité de pixels :

var markerIconVersion = (window.devicePixelRatio > 1.5) ? 'icon@2x.png' : 'icon.png';
var markerIcon = new google.maps.MarkerImage(markerIconVersion, null, null, null, new google.maps.Size(xx,xx));

// Déclaration du marker
marker = new google.maps.Marker({
    icon: markerIcon,
    // etc...
});

// Règle spécifique pour éviter un bug sur certaines version de l'API 
// cf : http://stackoverflow.com/questions/9208916/google-map-custom-markers-retina-resolution
if (window.devicePixelRatio > 1.5) {
    marker.setOptions({ optimized: false });
}

On a donc besoin de 2 icônes différentes :

• icon.png, destiné aux écrans normaux
• icon@2x.png, destiné aux écrans à haute densité de pixels. C’est simplement icon.png avec des dimensions multipliées par 2.

Ensuite, dans la déclaration de la variable markerIcon, on va donner les dimensions de icon.png à la déclaration new google.maps.Size(xx,xx).
L’image @2x sera donc redimensionnée à la taille de l’image normale et son rendu optimisé sur les écrans Rétina.