Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

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

Vous pouvez localiser votre application Google Maps JavaScript API en modifiant les paramètres de langue par défaut et en spécifiant un code de région, ce qui changera le comportement de la carte en fonction d'un pays ou d'un territoire donné. En savoir plus sur la localisation de la carte.

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.

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.