L'API GoogleMaps

Dans la page précédente vous avez vu comment l'internaute peut connaître la latitude et la longitude de l'endroit où il se trouve.
Dans cette page vous allez apprendre à utiliser l'API GoogleMaps et plus précisément afficher la carte correspondant à une certaine latitude et longitude.
Vous devez vous douter que l'étape suivante sera l'affichage de votre position actuelle sur une carte.

Le code de la page (extraits)

... <style> #carte{height: 500px; width:100% ;} </style> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> ... <body> ... <div id ="carte"></div> <script> var map = new google.maps.Map(document.querySelector("#carte"), { zoom: 19, center: new google.maps.LatLng(50.94, 1.87), mapTypeId: google.maps.MapTypeId.ROADMAP }); </script> </body> ...

Commentaire

Avec le CSS on définit une boîte identifiée carte qui va accueillir la carte de l'application GoogleMaps.

<script src="http://maps.google.com/maps/api/js?sensor=true"></script> : grâce à cette instruction JavaScript l'API GoogleMaps est chargée.
sensor est à true ce qui veut dire que le GPS est activé.

Etudions maintenant le script (situé dans la partie body de la page) !

Revenons sur la syntaxe.
Il faut fournir des paramètres à l'objet google.maps.Map. Le premier paramètre doit être l'élément du DOM dans lequel la carte va être affichée. Ensuite, le second paramètre ce sont les options qui doivent être fournies sous la forme : {nom: valeur, nom: valeur, …}.
Les coordonnées sont fournies via un nouvel objet : google.maps.LatLng.
Ici ces coordonnées ne découlent pas d'une géolocalisation mais sont des constantes.

Dans la page suivante on va combiner l'API géolocalisation et l'API GoogleMaps afin que l'internaute connaisse sa position sur une carte (ou une image satellite).
Retour menu