html5 tutorial : géolocalisation html5 sur Google Maps




 

Un précédent article montrait comment faire de la géolocalisation avec html5 et Javascript. Je vous détaille, pas à pas, comment placer un utilisateur sur Google Maps à l’aide de l’API de géolocalisation html5 et de l’API Google Maps.

 

Prérequis

– Avoir lu l’article La géolocalisation avec html5 et javascript;
– disposer d’un navigateur compatible html5;
– ou mieux d’un smartphone.

 

Google Maps dans la vue html5

En réalité, nous n’intégrons pas directement la Google Maps, cela se fait en Javascript. Mais on crée une zone div qui va accueillir la Google Maps à laquelle nous attribuons un identifiant via la propriété id :

<div id="googleMaps"></div>

Ce n’est, toutefois pas suffisant: le div tel qu’il est déclaré ci-dessus n’a pas de paramètre de taille. De ce fait, lors de l’initialisation de la Google Maps, rien ne s’affichera à l’écran. Je vous conseille donc d’ajouter un style comme suit :

<div id="googleMaps" style="height: 50%; width:50%;"></div>

 

L’API Google Maps

L’API est disponible à l’url http://maps.google.com/maps/api/js.

Le mode d’importation peut comporter plusieurs paramètres parmi lesquels :
language qui spécifie la langue dans laquelle sera affichée la carte Google Maps;
sensor qui spécifier si oui ou non le GPS est utilisé, ce paramètre est obligatoire;
key qui spécifie la clé (API Key).

Paramétrée, l’url devient : http://maps.google.com/maps/api/js?sensor=false&param1=valuer1&param2=valuer2 etc…..

Il vous faut l’importer comme suit (n’oubliez pas d’ajouter les paramètres décrits précédemment le cas échéant) :

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

 

L’objet Map

L’objet Map permet de charger une carte Google Maps dans un conteneur html5.

Le constructeur de cet objet prend en paramètres :
– le conteneur html5 qui contient la Google Maps, souvent un div;
– une structure de données au format JSon encapsulant des paramètres optionnels.

 

var map = new google.maps.Map(document.getElementById("idConteneurHTML"), options);

 
La structure de données JSon de l’objet Google Map contient 3 clés optionnelles :
center qui est un objet de type LatLng prenant en paramètres les coordonnées latitudinale, et longitudinale utilisées pour centrer la carte;
zoom qui est un entier supérieur ou égal à 0, indique le niveau de zoom de la carte Google en sachant qu’un zoom à 0 montre la terre en entier;
mapTypeId qui indique le format de la vue de la carte Google (satellite, rues, ….).

 
Pour mapTypeId 4 valeurs sont possibles :
HYBRID : qui affiche une couche transparente sur des images satellite représentant les rues principales;
ROADMAP : qui affiche le plan des rues;
SATELLITE : qui affiche la vue satellite;
TERRAIN : qui affiche la carte avec les particularités physiques tels que le terrain et la végétation.

 

var options = {
  center: new google.maps.LatLng(-34.397, 150.644),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

 
L’objet Map qui est initialisé au chargement de la page html5 sur l’évènement Javascript load, va alimenter le conteneur html5 div que l’on a nommée googleMaps.

 
On crée donc une fonction initialisation comme suit :

var initialisation = function() {
  map = new google.maps.Map(document.getElementById("googleMaps"), options);
}

que l’on charge sur l’évènement Javascript load :

window.addEventListener("load", initialisation);

Pour le moment, nous affichons la carte centrée sur des coordonnées arbitraires :

<html>
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script>
 var options = {
  center: new google.maps.LatLng(-34.397, 150.644),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = undefined;

 var initialisation = function() {
  map = new google.maps.Map(document.getElementById("googleMaps"), options);
 }

 window.addEventListener("load", initialisation);
</script>

 <div id="googleMaps" style="height: 50% ; width:50%;"></div>
</html>

 

Détection et affichage sur Google Maps

Nous allons créer une fonction Javascript qui détectera nos coordonnées, mettra à jour la carte Google Maps et qui sera appelée sur le clic d’un bouton insérée dans la page html5.

 

Ajout du bouton

Rien de complexe ici :

<div id="googleMaps" style="height: 50%; width:50%;"></div>
<input type="button">

 

La fonction appelée sur le clic

Nous créons une fonction que nous nommons mettreAJourPositionGoogleMap chargée de détecter les coordonnées géolocalisées et de mettre à jour la carte Google Maps.

Cette fonction teste la compatibilité du navigateur et récupère, quand c’est possible, les coordonnées de géolocalisation.

La recherche de la position courante se fait via l’API de géolocalisation HTML5 qui met à disposition la méthode navigator.geolocation.getCurrentPosition.

Pour rappel, cette méthode prend de un à trois paramètres :
– le premier est une fonction de callback qui est exécutée lorsque la géolocalisation s’est correctement passée;
– le deuxième est une fonction de callback qui est exécutée en cas d’erreur lors de la géolocalisation;
– le troisième paramètre est un objet PositionOptions qui comporte trois propriétés optionnelles : enableHighAccuracy, timeout, et maximumAge.

C’est donc la fonction de callback qui doit mettre à jour les coordonnées sur la carte.

Nous créons donc deux fonctions mettreAJourPositionGoogleMap appelée sur le clic du bouton et mettreAJourPositionSurCarte.

La fonction mettreAJourPositionGoogleMap :

var mettreAJourPositionGoogleMap = function() {
 if(navigator.geolocation) {
   // geolocalisation supportée
   navigator.geolocation.getCurrentPosition(mettreAJourPositionCarte);
  } else {
   // geolocalisation non supportée
 }
}

La fonction mettreAJourPositionSurCarte prend en paramètre un objet Position qui encapsule les informations de géolocalisation sous la forme d’un objet Coordinates coords.

Cet objet nous permet de mettre à jour la position sur la carte par le biais de la méthode panTo de l’objet Map. Cette méthode prend en paramètre un objet google.maps.LatLng, objet déjà utilisé dans les options d’initialisation de notre map déclarée précédemment et dont le constructeur prend en paramètres la latitude et la longitude.

var mettreAJourPositionSurCarte = function(geolocPosition) {
 map.panTo(new google.maps.LatLng(geolocPosition.coords.latitude, geolocPosition.coords.longitude));
}

 

La fonction d’erreur

Nous ajoutons la fonction callback d’erreur que nous nommons erreurPositionGeolocalisation, qui sera appelée en cas d’échec de géolocalisation et qui affichera un message d’erreur comme suit :

 var erreurPositionGeolocalisation = function(positionError) {
  document.getElementById("erreur").innerHTML = "Erreur : " + positionError.message;
 }

Il nous faut aussi modifier le code html5 afin de déclarer un div pour afficher l’erreur :

 <div id="googleMaps" style="height: 50%; width:50%;"></div>
 <input type="button" value="Mettre à Jour Coordonnées" onclick="mettreAJourPositionGoogleMap();">
 <div id="erreur" style="position: relative; height: 50px; width:300px;"></div>

et la méthode mettreAJourPositionGoogleMap pour intégrer la fonction callback d’erreur :

var mettreAJourPositionGoogleMap = function() {
 if(navigator.geolocation) {
   // geolocalisation supportée
   navigator.geolocation.getCurrentPosition(mettreAJourPositionCarte, erreurPositionGeolocalisation);
  } else {
   // geolocalisation non supportée
 }
}

Vous pouvez tester le code source en cliquant sur l’exemple de géolocalisation html5. Je vous conseille de faire le test depuis votre smartphone. Vous pouvez par la même occasion télécharger les sources.

 
[important]Faites part de vos remarques si des zones d’ombre persistaient. L’utilisation de la géolocalisation html5 vous parait elle une alternative à ce qui existe ?[/important]

 

Posté dans html5Taggé api geolocalisation, faire des jeux, géolocalisation html5, géolocalisation html5 google map, google map api, google maps api, html et javascript, HTML5, html5 google maps, html5 gps, html5 gps api, html5 tutorial, javascript api geolocalisation  |  Laisser un commentaire

Répondre

*