Merci Ben_V.
C'est une solution qui doit marcher je pense. Je n'ai pas vu ta réponse plus tôt et je me suis démerdé tout seul pour apprendre les bases du JavaScript en 2 jours et résoudre mon problème. Je suis arrivé à un résultat satisfaisant et je le partage avec vous.
Ma solution permet de récupérer les coordonnées géographiques, de les insérer directement dans la réponse d'une question de type zone de texte court ou long et d'afficher la position récupérée sur une carte. Je vous laisse découvrir :
Code:
<script type="text/javascript" charset="utf-8">
var xlat ; var xlng ;
function getLocation() {
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showLocation, errorHandler);
}
else
{
alert('Votre navigateur ne prend malheureusement pas en charge la géolocalisation.');
}
}
function showLocation(position)
{
alert('Latitude : '+ position.coords.latitude +' - Longitude : '+ position.coords.longitude,"Votre position a été localisée avec succès");
xlat = position.coords.latitude ;
xlng = position.coords.longitude;
var Idt = "{SGQ}";
document.getElementById("answer"+Idt).value= xlat+", "+xlng;
}
function errorHandler(error)
{
// On log l'erreur sans l'afficher, permet simplement de débugger.
alert('Geolocation error : code '+ error.code +' - '+ error.message);
// Affichage d'un message d'erreur plus "user friendly" pour l'utilisateur.
// alert('Une erreur est survenue durant la géolocalisation. Veuillez réessayer plus tard ou contacter le support.');
}
function maPosition(){
if(xlat==null && xlng==null) {
alert("Vous devez vous géolocaliser d'abord !");
}
else {
alert("Longitude : "+xlng, "Latitude : "+xlat);
}
}
function afficherCarte(){
if(xlat==null && xlng==null) {
alert("Vous devez vous géolocaliser d'abord !");
}
else {
myMap(xlat,xlng);
}
}
</script>
<p id="paragraphe_01">
<input id="Geolocaliser" onclick="getLocation()" type="button" value="Geolocaliser" />
<input id="Coordonnees" onclick="maPosition()" type="button" value="Voir Coordonnés" />
<input id="Carte" onclick="afficherCarte()" type="button" value="Afficher sur la carte" />
</p>
<script type="text/javascript" charset="utf-8">
document.getElementById("Geolocaliser").style.color = "black";
document.getElementById("Coordonnees").style.color = "black";
document.getElementById("Carte").style.color = "black";
</script>
<div id="googleMap" style="width:100%;height:400px;"> </div>
<script>
function myMap(nlat,nlng) {
var myLatlng = new google.maps.LatLng(nlat,nlng);
var mapOptions = {
zoom: 16,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Ma Position"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
</script> <script src="https://maps.googleapis.com/maps/api/js?key=VotreCléGoogleMap&callback=myMap"></script>
