Afficher votre position actuelle avec un marqueur sur une carte

La carte avec votre position

Si la carte ne s'affiche pas c'est que votre navigateur a bloqué la géolocalisation.
Vérifiez donc les paramètres du "browser".

Je rappelle que Chrome depuis la version 50 bloque la géolocalisation si la connexion n'est pas sécurisée et même si dans le paramètrage du navigateur elle est autorisée.
Donc cette page ne fonctionne pas avec Chrome puisque le protocole est HTTP (et non pas HTTPS).
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.ROADMAP }); var marqueur = new google.maps.Marker({ position: new google.maps.LatLng(vlatitude, vlongitude), map: map }); } // fin fonction fcarte

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