Concepts

Développement pour les appareils mobiles

Google Maps JavaScript API a été conçue pour se charger rapidement et fonctionner parfaitement sur les appareils mobiles. En particulier, nous avons axé nos efforts sur les développements dédiés aux appareils mobiles avancés, tels que les téléphones portables Android et iOS. Les écrans des appareils mobiles sont plus petits que les navigateurs généralement utilisés sur les ordinateurs de bureau. En outre, ils présentent souvent des comportements bien spécifiques (pincer pour zoomer, par exemple). Pour que votre application fonctionne sans problème sur les appareils mobiles, respectez les recommandations suivantes :

Définissez les attributs de largeur et de hauteur du conteneur <div> qui inclut votre carte sur 100%. Notez toutefois qu'avec ces valeurs, l'affichage peut ne pas être optimal avec certains navigateurs de bureau plus anciens.

Pour détecter les appareils iPhone et Android, examinez la propriété navigator.userAgent dans le DOM :

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map");

  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';
  }
}

Cela vous permet de modifier la disposition pour des appareils particuliers, comme nous l'avons fait ici afin de modifier la taille de l'écran pour chaque appareil.

Les appareils Android et iOS respectent la balise <meta> suivante :
```
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
```
Avec cette configuration, la carte s'affiche en plein écran et l'utilisateur ne peut pas modifier sa taille. Notez que, pour le navigateur Safari de l'iPhone, cette balise <meta> doit être insérée dans l'élément <head> de la page.

Pour plus d'informations sur les développements dédiés à l'iPhone, voir la documentation pour les développeurs d'Apple. Pour plus d'informations sur les développements dédiés à aux appareils Android, voir la documentation Android.

Localisation

Pour localiser votre application Maps API, vous pouvez modifier les paramètres de langue par défaut. Vous pouvez aussi définir le code de région de l'application, ce qui modifie son comportement, selon le pays ou le territoire correspondant.

Localisation linguistique

Google Maps API applique le paramètre de langue préférée du navigateur pour afficher les informations textuelles (noms des commandes, mentions de droits d'auteur, itinéraires et libellés sur les cartes, par exemple). Dans la plupart des cas, c'est la meilleure option, car il est préférable de ne pas écraser le paramètre de langue préférée de l'utilisateur. Toutefois, si vous souhaitez modifier l'API pour qu'elle ignore le paramètre de langue du navigateur et affiche les informations dans une langue particulière, vous pouvez ajouter le paramètre language facultatif à la balise <script> lorsque vous insérez le code Maps API JavaScript, en spécifiant la langue à utiliser.

Par exemple, pour afficher une application Maps API en japonais, ajoutez &language=ja à la balise <script>, comme indiqué ci-dessous :

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=ja"
type="text/javascript">
</script>

Remarque : si vous chargez l'API de cette façon, le japonais est appliqué à tous les utilisateurs, quelles que soient leurs préférences. Avant de définir cette option, assurez-vous que c'est effectivement le comportement souhaité.

Voir l'exemple (map-language.html)

Maps Javascript API prend également en charge le texte bidirectionnel (Bidi) contenant des caractères à la fois en langue qui se lit de gauche à droite (LTR – Left-to-Right) et en langue qui se lit de droite à gauche (RTL – Right-to-Left), en natif. Par exemple, l'arabe, l'hébreu et le farsi sont des langues RTL. Pour assurer un rendu correct, il est généralement préférable de signaler les pages en langue RTL, en ajoutant dir='rtl' à l'élément <html> de la page. L'exemple suivant affiche le rendu d'une carte du Caire, en Égypte, à l'aide de commandes en arabe :

Voir l'exemple (map-rtl.html)

Voir aussi la liste des langues prises en charge. Notez que cette liste peut ne pas être exhaustive, car nous mettons régulièrement à jour les langues prises en charge.

Localisation régionale

Lorsque vous chargez l'API à partir de maps.googleapis.com, elle applique une préférence par défaut envers les États-Unis pour le comportement de l'application. Si vous souhaitez modifier votre application pour qu'elle fournisse d'autres tuiles de carte ou pour en changer la préférence (par exemple en favorisant la région pour les résultats de géocodage), vous pouvez modifier ce comportement par défaut en ajoutant un paramètre region à la balise <script> lorsque vous insérez le code Maps API JavaScript.

En tant que développeur d'une application Maps API, vous devez vous assurer que votre application respecte les réglementations locales. Vous êtes donc chargé d'appliquer la localisation régionale pertinente pour le pays qui héberge l'application.

Le paramètre region prend en charge les identifiants de balise secondaire de région Unicode qui (généralement) présentent une correspondance un-à-un avec les domaines nationaux de premier niveau (ccTLD – country code Top-Level Domain). La plupart des identifiants de région Unicode sont identiques aux codes ISO 3166-1, à quelques exceptions près. Ainsi, le ccTLD du Royaume-Uni est « uk » (ce qui correspond au domaine .co.uk), tandis que son identifiant de région est « GB ».

Par exemple, pour utiliser une application Maps API localisée pour le Royaume-Uni, ajoutez &region=GB à la balise <script>, comme indiqué ci-dessous :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=GB"
type="text/javascript">
</script>

Les exemples suivants présentent deux cartes. La première affiche le géocode « Toledo » en se basant sur la région par défaut (US, pour États-Unis), c'est-à-dire « Toledo, Ohio ». Dans la seconde, nous avons défini region sur ES (Espagne) pour biaiser les résultats afin d'afficher « Toledo, Spain ».

Charger l'API en Chine

En Chine, les Google Maps API sont desservies depuis http://maps.google.cn. Lorsque vous proposez du contenu en Chine, remplacez https://maps.googleapis.com par http://maps.google.cn. Par exemple :

<script src="http://maps.google.cn/maps/api/js?key=YOUR_API_KEY"
type="text/javascript">
</script>

Si vous ciblez spécifiquement des utilisateurs basés en Chine, il peut s'avérer utile d'ajouter également les paramètres de région et de langue. L'API prend en charge zh-CN et zh-TW comme valeurs du paramètre language.

<script src="http://maps.google.cn/maps/api/js?region=cn&language=zh-CN&key=YOUR_API_KEY"
type="text/javascript">
</script>

Versionnage

L'équipe Google Maps JavaScript API met régulièrement à jour l'API avec de nouvelles fonctionnalités, des correctifs de bugs et des améliorations de la performance. Pour indiquer la version de l'API à charger dans votre application, vous pouvez la spécifier dans le paramètre v de la requête bootstrap de Google Maps JavaScript API. En savoir plus sur le versionnage.