Accueil    Codes    Html5 - Géolocalisation
 



Html5 - API video  Html5 - Géolocalisation



Présentation



L'API associée à la géolocalisation permet de récupérer les coordonnées de l'utilisateur (latitude, longitude et altitude dans certains cas). Il est alors possible en utilisant google map de positionner l'utilisateur sur une carte :

Support de la géolocalisation :



Mise en place



Le premier élément à prendre en compte est le support de la géolocalisation par le navigateur. Il s'agit du test javascript suivant :

if (navigator.geolocation){
   // Supporté
}
else{
   // Non supporté
}

Si le navigateur supporte la fonctionnalité de géolocalisation, il faut employer la fonction de l'API permettant de récupérer les coordonnées : getCurrentPosition(). Cette fonction ayant plusieurs signatures, nous utiliserons celle qui référence en premier paramètre la fonction en cas de réussite et en second paramètre la fonction en cas d'échec.

if (navigator.geolocation){
   // Supporté
   navigator.geolocation.getCurrentPosition(successCallBack, errorCallBack);
}

function successCallBack(position) {
   //Fonction appelée une fois les coordonnées obtenues
}

function errorCallBack(erreur) {
   //Fonction appelée en cas d'échec d'obtention des coordonnées
}

Si l'obtention des coordonnées se passe correctement, nous devons finalement employer google map pour ajouter une marque sur la carte. Il fqut faire référence à l'API de google et générer la carte avec les options adéquates puis finalement ajouté le marqueur correspondant à la position reçue par la géolocalisation.

function successCallBack(position) {
   // Obtention des coordonnées
   var Coordonnees = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
   // Affichage de Google Map
   // Options de la carte
   var GmapOption = {zoom: 16, center: Coordonnees, mapTypeControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
   var Gmap = new google.maps.Map(document.getElementById('Gmap'), GmapOption);
   // Affichage du marqueur de la position
   var marqueur = new google.maps.Marker({position: Coordonnees, map: Gmap, title:'Coordonnées retournées'});
}