Utiliser le paramètre size pour augmenter la définition de la carte statique
Le paramètre size de l'API Google Static Maps permet de définir la taille d'une carte en pixels. Ainsi, une carte ayant pour paramètre size=200x200 sera affichée avec une largeur et une hauteur de 200 pixels. Sur un écran LCD d'ordinateur, qui affiche généralement environ 100 pixels par pouce (ppi), une carte de 200x200 pixels fera environ 2 pouces dans chaque dimension.
Toutefois, les appareils mobiles sont de plus en plus équipés d'écran haute résolution avec des densités de pixels proches des 300ppi, qui vont :
- soit réduire la taille d'une image de 200x200 pixels à seulement 0,7 pouces, rendant les labels et les icônes trop petits pour être lisibles,
- soit modifier la taille de l'image (zoom) afin d'en améliorer la lisibilité, générant une image floue ou pixelisée.
| Image trop petite | Image trop floue |
|---|---|
Lorsque vous développez des cartes pour appareils mobiles, utilisez le paramètre d'échelle scale de l'API Google Static Maps pour afficher l'image de la carte avec une meilleur résolution, permettant ainsi de résoudre les problèmes évoqués ci-dessus.
Pour appliquer cette mise à l'échelle il suffit d'ajouter &scale=2 à l'URL de votre image.
La valeur du paramètre échelle scale est multipliée par la taille size pour déterminer les dimensions réelles d'affichage de l'image en pixels, sans toutefois changer la zone de couverture de la carte.
La valeur d'échelle scale, par défaut, vaut 1. Les valeurs acceptées sont :
- 1,
- 2,
- 4, pour les clients Maps API Premier uniquement.
Par exemple, une valeur d'échelle scale=2 retournera la même zone de couverture qu'une requête ne comportant pas le paramètre scale spécifié, mais avec deux fois plus de pixels dans chaque dimension. Ceci inclut les routes et les labels, afin qu'ils soient lisibles sur des écrans de petite taille et de haute résolution, aussi bien que s'ils avaient été redimensionnés par le navigateur.
| size=150x150 | size=150x150&scale=2 |
|---|---|
| <img src=" http://maps.googleapis.com/maps/api/staticmap ?center=Tours &zoom=15 &size=150x150 &maptype=roadmap &sensor=false" /> |
<img src=" http://maps.googleapis.com/maps/api/staticmap ?center=Tours &zoom=15 &size=150x150 &maptype=roadmap & scale=2&sensor=false" /> |
Une telle image s'affichera aussi bien sur les navigateurs de bureau, lorsqu'elle est insérée dans une balise <img/> ou <div/> avec la hauteur et la largeur fixées à l'aide de propriétés CSS. Le navigateur réduira la taille de l'image à la taille correcte, sans perte de qualité.
Le tableau ci-dessous montre trois requètes images différentes.
- La première requète est pour une image de 100x100 pixels, sans que la valeur du paramètre échelle
scalesoit spécifiée. La carte s'affiche correctement sur un ordinateur de bureau, mais est trop petite pour être lue sur un appareil mobile. - La seconde requète double la taille de la carte : 200x200 pixels. Sur un ordinateur de bureau, les règles CSS appliquées sur la balise
<img/>lui attribuent une taille de 100x100 pixels, mais en réduisant la taille de l'image, les routes et les labels sont devenus trop petits. Sur un appareil mobile, l'image est à la bonne taille, mais encore une fois, les routes et les labels sont illisibles. - La troisième requète est pour une carte de 100x100 pixels avec un paramètre échelle
scale=2. L'image est retournée avec des détails de 200px. Le navigateur d'un ordinateur de bureau redimmensionne parfaitement l'image de la carte, de sorte qu'il est impossible de la distinguer de la requête originale 100x100 pixels, tandis que le navigateur pour appareil mobile bénéficie de la résolution supplémentaire rendue par l'API.
| Appareil | size=100x100 |
size=200x200 |
size=100x100&scale=2 |
|---|---|---|---|
| Ordinateur de bureau | |||
| Appareil Mobile Haute Résolution (simulation) |
|||
| Code de la Balise image |
<img src=" http://maps.googleapis.com/maps/api/staticmap ?center=Tours &zoom=15 & size=100x100&maptype=roadmap &sensor=false" width="100px"height="100px" /> |
<img src=" http://maps.googleapis.com/maps/api/staticmap ?center=Tours &zoom=15 & size=200x200&maptype=roadmap & scale=1&sensor=false" width="100px"height="100px" /> |
<img src=" http://maps.googleapis.com/maps/api/staticmap ?center=Tours &zoom=15 & size=100x100&maptype=roadmap & scale=2&sensor=false" width="100px"height="100px" /> |
scale facilite la requête pour obtenir une carte sous forme d'image pour une résolution d'écran standard, et la carte correspondante pour un écran haute résolution, simplement en modifiant le paramètre échelle scale= 1 et scale=2.Pour plus d'informations sur le développement d'applications pour mobiles et sur les écrans haute résolution, lisez :
- Gestion d'écrans multiples dans la documentation pour les développeurs Android.
- Recommandations Webkit.org pour développer des sites web pour appareils disposant d'écran à haute résolution.
- Gestion d'écrans haute résolution dans la bibliothèque des développeurs iOS.