Géolocalisation - suite

Afficher votre position actuelle sur une carte

La carte avec votre position

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

Attention l'affichage d'une carte Google dans une page 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 ...

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

Le code correspondant sous forme d'une page web

Je vous communique exceptionnellement le code complet de la page afin que vous puissiez la tester en local.
Ainsi et malgré l'absence de clé, la carte s'affichera en clair (et non pas en grisé).

<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

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.

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 script correspondant

Aussi je ne vous communique que des extraits de ce script.

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