Google Maps Notions de base

Créer une carte Google simple

Créons maintenant une carte Google simple.

Ci-dessous se trouve une carte Google montrant Londres, en Angleterre :

Exemple

<!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>

Essayez-le vous-même »

Analyse de l'exemple

Nous utilisons l'exemple ci-dessus pour analyser le processus de création de Google Maps.

Pourquoi l'application doit-elle déclarer HTML5 ?

<!DOCTYPE html>

La plupart des navigateurs affichent les pages à l'aide de documents HTML5 en « mode standard », ce qui signifie que votre application est compatible avec tous les principaux navigateurs.

De plus, sans balise DOCTYPE, les navigateurs utilisent le mode quirks pour afficher le contenu de la page.

Astuce :Il convient de noter que certains CSS en mode quirks ne sont pas applicables en mode standard. Dans une application spécifique, toutes les tailles en pourcentage doivent être héritées de l'élément bloc parent. Si aucune taille n'est spécifiée dans le module parent, la valeur par défaut est 0 x 0 pixels. Si vous souhaitez utiliser des pourcentages, vous pouvez les déclarer dans la balise <style>, comme indiqué ci-dessous :

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Cette déclaration de style indique que le module de carte (GoogleMap) doit avoir une hauteur HTML de 100%.

Ajouter une clé API Google Maps

Dans l'exemple suivant, la première balise <script> doit inclure l'API Google Maps :

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Placez la clé API générée par Google danskeydans le paramètre (key=YOUR_API_KEY)。

Le sensorLe paramètre est requis. Il est utilisé pour indiquer si l'application utilise un capteur (comme la navigation GPS) pour déterminer la position de l'utilisateur. La valeur du paramètre peut être définie sur true ou false.

HTTPS

Si votre application est une application HTTP sécurisée (HTTPS : HTTP Secure), vous pouvez utiliser HTTPS pour charger l'API Google Maps :

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Chargement asynchrone

De même, nous pouvons également charger l'API Google Maps après le chargement complet de la page.

L'exemple suivant utilise window.onload pour charger Google Maps après le chargement complet de la page. La fonction loadScript() crée une balise <script> qui charge l'API Google Maps. De plus, le paramètre callback=initialize est ajouté à la fin de la balise, et initialize() sera exécuté comme fonction de rappel après le chargement complet de l'API :

Exemple

function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;

Essayez-le vous-même »

Définir les propriétés de la carte

Avant d'initialiser la carte, nous devons d'abord créer un objet de propriétés Map pour définir quelques propriétés de la carte :

var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:7,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

center (point central)

La propriété center spécifie le centre de la carte, ce qui crée un point central sur la carte à l'aide de coordonnées (latitude, longitude).

Zoom (niveau de zoom)

La propriété zoom spécifie le niveau de zoom de la carte. zoom: 0 affiche la carte entière du monde entièrement dézoomée.

MapTypeId (type initial de la carte)

La propriété mapTypeId spécifie le type initial de la carte.

mapTypeId inclut les quatre types suivants :

  • google.maps.MapTypeId.HYBRID : Affiche une couche transparente des rues principales sur l'imagerie satellite
  • google.maps.MapTypeId.ROADMAP : Affiche une carte des rues ordinaire
  • google.maps.MapTypeId.SATELLITE : affiche l'imagerie satellite
  • google.maps.MapTypeId.TERRAIN : affiche une carte avec des caractéristiques naturelles (comme le relief et la végétation)

Où afficher la carte Google

Habituellement, une carte Google est utilisée dans un élément <div> :

Remarque :La carte s'affichera à la taille définie dans la div, nous pouvons donc définir la taille de la carte dans l'élément <div>.

Créer un objet Map.

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

Le code ci-dessus utilise le paramètre (mapProp) pour créer une nouvelle carte dans l'élément <div> (avec l'id googleMap).

Astuce :Si vous voulez créer plusieurs cartes sur la page, il vous suffit d'ajouter de nouveaux objets Map.

L'exemple suivant définit quatre instances de carte (les quatre cartes utilisent différents types de carte) :

Exemple

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2); var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3); var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

Essayez-le vous-même »

Charger la carte

Après le chargement de la fenêtre, la fonction initialize() est exécutée pour initialiser l'objet Map, en veillant à ce que la carte Google soit chargée une fois la page entièrement chargée :

google.maps.event.addDomListener(window, 'load', initialize);
autres extensions