Une des nouveautés du HTML5 est l’intégration dans les navigateurs de la géolocalisation. Dans ce rapide tutoriel, nous allons voir comment tirer parti de cette fonctionnalité pour créer des QR Codes qui contiendront non pas simplement les coordonnées GPS d’un lieu sur la carte mais l’itinéraire pour aller de l’emplacement actuel de l’utilisateur vers un lieu donné.

A noter bien évidemment que cet exemple ne fonctionnera que sur les navigateurs supportant le HTML5:

La geolocalisation est intégrée sous la forme d’une extension de l’objet navigator.geolocation, et vient avec son lot de méthodes particulièrement utiles comme par exemple getCurrentPosition(), qui renvoie un objet de type ‘position’. L’appel à cette fonction se fait de la manière suivante :

if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( function (position) {

// traitement si la position a pu être déterminée

},
function (error){

//Gestion d'erreur

}
);
}
else
alert("Votre navigateur ne gère pas la géolocalisation");

Pour des raisons de sécurité assez évidentes, l’accès aux coordonnées GPS est protégé au niveau du navigateur , et ce dernier devra explicitement accepter que la page web accède à ces informations:

A partir de là, nous disposons de la latitude et longitude de l’utilisateur et il ne reste plus qu’à construire une URL destinée à l’API de Google maps. Nous n’utiliserons ici que le strict minimum de paramètres, à savoir « saddr » (adresse de départ ) et « daddr » (adresse d’arrivée). Nous choisirons dans cet exemple comme destination la Place du Palais, à Bordeaux (au hasard):

if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( function (position) {

destination = "Place du Palais, Bordeaux";

googleDirectionsURL = "http://maps.google.com/?saddr=" + position.coords.latitude + "," + position.coords.longitude + "&daddr="+escape(destination);

window.location.href = googleDirectionsURL;

},
function (error)
{
switch(error.code)
{
case error.TIMEOUT:
alert ('Délai d\'attente dépassé.');
break;
case error.POSITION_UNAVAILABLE:
alert ('Impossible de déterminer votre position');
break;
case error.PERMISSION_DENIED:
alert ('Authorisation requise');
break;
case error.UNKNOWN_ERROR:
alert ('Erreur inconnue');
break;
}
}
);
}
else
alert("Votre navigateur ne gère pas la géolocalisation.");

Nous disposons maintenant d’une page web qui affiche sur Google maps l’itinéraire depuis l’emplacement actuel de l’utilisateur vers la place du Palais à Bordeaux.

On termine en générant un QR code pointant vers cette page (dans notre exemple, la page créée ci dessus sera hébergée sur http://mlab.moonda.com/sandbox/geoloc.html) en utilisant l’API de Google Charts :

<img src="http://chart.apis.google.com/chart?chs=400x400&amp;amp;amp;amp;cht=qr&amp;amp;amp;amp;chl=http://mlab.moonda.com/sandbox/geoloc.html" alt="Smart QR Code" />

Et voilà un magnifique QRCode à apposer sur une carte de visite ou un flyer afin que l’utilisateur doté d’un Scanner de QR code puisse être dispensé de la fastidieuse étape consistant à saisir sur un clavier minuscule les lieux de départ et d’arrivée pour trouver son itinéraire:

A noter que sous la plupart des smartphones, ouvrir Google maps dans un navigateur poussera le téléphone à Basculer vers l’Application « Maps »: