Géolocalisation - suite

Etape 3 :afficher votre position actuelle avec un marqueur sur une carte

La carte avec votre position

En haut et à gauche il y a un bouton pour basculer en mode "satellite".

Je rappelle que désormais les principaux navigateurs bloquent la géolocalisation si la connexion n'est pas sécurisée et même si dans le paramètrage du navigateur la géolocalisation est autorisée. Donc cette page devrait fonctionner puisque mon site est désormais passé au protocole HTTPS. Cependant les moteurs de recherche peuvent encore vous rediriger vers la version HTTP ....
Je vous communique donc et exceptionnellement tout le code afin que vous puissiez tester en local éventuellement.

Le code correspondant sous forme d'une page web

<html><head> <meta charset ='utf-8'> <script src="https://maps.google.com/maps/api/js?sensor=true"></script> </head> <body> <div id ="carte1" style ="height: 500px; width:100% ; border : 1px solid black;"></div> <script> if(navigator.geolocation) navigator.geolocation.getCurrentPosition(fcarte) ; function fcarte(position) { var vlatitude = position.coords.latitude; var vlongitude = position.coords.longitude; var map = new google.maps.Map(document.querySelector("#carte1"), { zoom: 19, center: new google.maps.LatLng(vlatitude,vlongitude), mapTypeId: google.maps.MapTypeId.ROADMAP }); var marqueur = new google.maps.Marker({ position: new google.maps.LatLng(vlatitude, vlongitude), map: map }); } // fin fonction fcarte </script> </body></html>

Commentaire du script

Notez le script dans la partie HEAD de la page. En effet on fait au service "maps" proposée par GOOGLE.
Donc si vous testez en local ce code vous devez disposer d'une connexion internet.

Les variables vlatitude et vlongitude récupèrent respectivement la latitude et la longitude de votre position actuelle.

Ces variables servent de paramètres pour centrer la carte et pour afficher le marqueur.

Etape 3 - variante : afficher votre position sur une photo satellite

Votre position peut s'afficher sur une photo satellite plutôt qu'une carte.

La photo satellite avec votre position

Dans la boite il y a un bouton pour basculer en mode plan. Le niveau de zoom n'est pas le même que l'exemple précédent.

Le code correspondant sous forme d'une page web

<html><head> <meta charset ='utf-8'> <script src="https://maps.google.com/maps/api/js?sensor=true"></script> </head> <body> <div id ="carte2" style ="height: 500px; width:100% ; border : 1px solid black;"></div> <script> if(navigator.geolocation) navigator.geolocation.getCurrentPosition(fcarte2) ; function fcarte2(position) { var vlatitude = position.coords.latitude; var vlongitude = position.coords.longitude; var map = new google.maps.Map(document.querySelector("#carte2"), { zoom: 15, center: new google.maps.LatLng(vlatitude,vlongitude), mapTypeId: google.maps.MapTypeId.SATELLITE }); var marqueur = new google.maps.Marker({ position: new google.maps.LatLng(vlatitude, vlongitude), map: map }); } // fin fonction fcarte </script> </body></html>

Commentaire


Retour menu