Afficher votre position actuelle avec un marqueur sur une photo satellite

Votre position sur une photo satellite

Si la photo satellite ne s'affiche pas c'est que votre navigateur a bloqué la géolocalisation.
Pour les explications voire la page précédente.

Dans la page précédente votre position s'affiche sur une carte ; ici elle s'affiche dans une photo satellite.

Attention le navigateur Chrome à partir de la version 50 ne supporte plus l’API HTML5 Geolocalisation dans un contexte non sécurisé. En clair, pour qu’une page web qui s’éxécute sous Chrome puisse être en mesure de tirer profit de l’API Geolocalisation, doit être appelée avec utilisation du protocole HTTPS !
Donc cette page ne fonctionne pas avec Chrome puisque le protocole est HTTP.
Maintenant il vous suffit de tester avec un autre navigateur ou de produire une page web en récupérant le code ci-dessous et de la tester en local !

Le code de la page (extraits)

Dans la partie head il y a (comme dans la page précédente) l'instruction JavaScript pour incorporer l'API googleMaps.

Le script (dans la partie body) est le suivant :

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("#carte"), { zoom: 19, 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

Commentaire du script

Le script est identique à celui de la page précédente sauf pour la valeur de mapTypeId: mapTypeId: google.maps.MapTypeId.SATELLITE


Retour menu