HTML5 : API géolocalisation

Etape 1 : Affichage des coordonnées (latitute de longitude) du visiteur

Votre positionnement (latitude et longitude) doit en principe s'afficher dans la boîte ci-dessous à condition bien sûr que votre navigateur autorise la géolocalisation et que la connexion soit sécurisée.

Pour des raisons de confidentialité CHROME et FIREFOX restreignent l'usage de l'API Géolocalisation aux sites accessibles de manière sécurisée c'est à dire les sites cryptés avec le protocole HTTPS.
Donc pour que ça marche il faut deux choses : site sécurisé et autorisation par navigateur utilisé.

Information : à compter mon site est passée au protocole HTPPS.
Je vous communique quand même et exceptionnellement tout le code afin que vous puissiez tester en local.

Le code correspondant

Je vous communique exceptionnellement tout le code sous forme d'une page web afin que vous puissiez tester en local la géolocalisation.

<!doctype html> <html><head> <meta charset ='utf-8'> </head> <body> <div style = "width : 50% ; height : 100px ; border : 1px solid black ; text-align : center ; font-size : 14pt;"> </div> <script> if(navigator.geolocation) // si navigateur supporte cette API { navigator.geolocation.getCurrentPosition(flocalisation) ; // appel de la fonction flocalisation dès que la localisation est réussie } else alert('votre navigateur ne supporte pas la géolocalisation'); function flocalisation(position) { var infoposition = 'ma position : ' + '<br>'; infoposition += 'latitude : ' + position.coords.latitude + '<br>' ; infoposition += 'longitude : ' + position.coords.longitude + '<br>'; document.querySelector('div').innerHTML = infoposition ; } // fin fonction </script> </body></html>

A propos de la géolocalisation

Commentaire du code JavaScript

L'objet navigator de JavaScript possède désormais le sous objet geolocation.
Ce sous objet dispose entre autres de la méthode getCurrentPosition.
Cette méthode nécessite un paramètre obligatoire qui est en fait l'appel d'une fonction lorsque la localisation a réussi.
Ainsi dans l'exemple il y a appel de la fonction flocalisation.
La fonction de localisation a besoin d'un paramètre de type position. Ce paramètre possède entre autres la propriété coords.
La propriété coords comprend deux sous propriétés : latitude et longitude.
Dans la variable infoposition une phrase explicite qui devient le contenu de la boîte DIV est construite.

Etape 2 : l'API GoogleMaps

Dans l'étape précédente vous avez vu comment récupérer la latitude et la longitude de l'endroit où se trouve l'internaute.
Maintenant vous allez apprendre à utiliser l'API GoogleMaps et plus précisément afficher la carte centrée sur une certaine latitude et longitude.

Le code correspondant (extraits)

... <style> #carte{height: 500px; width:100% ;} </style> <script src="https://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> ...

Carte affichée par GoogleMaps

Commentaire

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

<script src="https://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 deuxième script (celui situé dans BODY)

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 voit sa position sur une carte (ou sur une image satellite).
Géolocalisation - suite
Retour menu du tutoriel