HTML5 : API géolocalisation

Afficher une carte Google Maps dans une page web

Point besoin d'être développeur web chevronné pour intégrer une carte Google dans une page.
Il suffit d'ouvrir google.fr de saisir le nom d'une localité (ou région ou pays) puis de cliquer sur l'onglet "Maps". La carte apparait ! Il faut alors cliquer sur "partager" puis "intégrer une carte" pour obtenir du code HTLM qu'il suffit ensuite de coller dans la page.

Ci-dessus une carte correspondant à la commune de Calais.
Le code généré par l'application Google Maps est le suivant :

Notez le lien vers un site sécurisé (protocole https).

Récupérer la position GPS de l'internaute

Il faut utiliser l'API geolocation !

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 le navigateur utilisé de la géolocalisation.

Le code correspondant

... <div style = "width : 50% ; height : 100px ; border : 1px solid black ; text-align : center ; font-size : 14pt; margin : auto;"> </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 ...

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.

Utiliser l'API Google Maps

Si vous voulez intégrer une carte Google interactive par exemple celle correspondant à la position GPS de l'internaute vous devez utiliser l'API Google Maps.
Attention l'affichage d'une carte google via l'API google Maps suppose depuis juin 2018 l'obtention d'une clé API sinon celle-ci apparait en grisé. Clé que je n'ai pas demandée car il faut ouvrir un compte de facturation chez Google ...

Je rappelle qu'il y a une solution alternative : gérer une carte OSM avec l'API leaflet. Voir chapitre suivant dans ce même tutoriel.

Si vous testez ce code en local et malgré l'absence de clé API la carte sera parfaitement visible !

Carte affichée via un script

Attention l'affichage d'une carte google Maps sur un site suppose depuis juin 2018 l'obtention d'une clé API sinon celle-ci apparait en grisé. Clé que je n'ai pas demandée car il faut ouvrir un compte de facturation chez Google ...

Il y a une alternative : le projet OpenStreetMap. qui est aussi traité dans ce tuto.

Le code correspondant (extraits)

... <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> ...

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 Google Maps 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