1- Introduction
Puisqu'il faut repérer, nous avons besoin d'une carte. Il existe une multitude d'API pour
cela, mais nous utiliserons celle de google. Pour afficher une carte google sur une page web il suffit
de :
- Faire appel à l'API de google Map dans la balise <head> de la page en ajoutant cette ligne:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
Dans la page, on réserve un espace pour afficher la carte. Une balise <div> par exemple :
<div id="map" width="500px" height="350px">
</div>
Ensuite le code javascript pour initialiser la carte :
function init(){
var myPosition = new google.maps.LatLng(6, 6);
var myOptions = {
zoom : 4,
center : myPosition,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
La géolocalisation avec Html5 s'effectue en récupérant des données fournies au navigateur par le dispositif utilisant l'application (par exemple, un téléphone mobile, un PC). Il existe différentes méthodes de localisation suivant le dispositif utilisé :
- Adresse IP
- Coordonnées GPS
- Réseau WIFI
- Réseau mobile
- Données entrée par l'utilisateur .
Pour ce faire on emploie JavaScript, en appelant la fonction navigator.geolocation.getCurrentPosition(). Cette fonction accepte 3 paramètres dont 2 optionnels. Ces paramètres sont en fait des fonctions dont le role est de gérer les évènements suivant :
- Succès de la localisation : fonction successCallback, paramètre obligatoire.
Le paramètre obligatoire est la fonction
successCallback, appelée en cas de succès de la géolocalisation, et qui récupère l'objet Position retourné. Cet objet contient les coordonnées de la position : latitude, longitude et accuracy (précision en mètres), accessibles via l'attribut coords.
- Echec de la localisation : fonction errorCallback, paramètre facultatif.
Ensuite, on peut spécifier un paramètre
errorCallback qui permet de définir une fonction pour gérer les cas d'erreurs.
- Options de geolocalisation : paramètre facultatif
Enfin on peut ajouter des options à notre géolocalisation (
timeout, maximumAge, enableHighAccuracy).
Concrètement le code javascript à utiliser est celui-ci
function localize(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function (pos){
var crd = pos.coords;
write("Latitude : " + pos.coords.latitude +
", Longitude : " + pos.coords.longitude +
", Erreur estimée à : "+ pos.coords.accuracy + "mètres" );
},
function (error){
switch(error.code){
case error.PERMISSION_DENIED:
write("L'utilisateur n'a pas autorisé"+
"l'accès à sa position");
break;
case error.POSITION_UNAVAILABLE:
write("L'emplacement de l'utilisateur"+
"n'a pas pu être déterminé");
break;
case error.TIMEOUT:
write("Le service n'a pas répondu à temps");
break;
}
},
{
enableHighAccuracy: true,
timeout: 5000,
maximunAge: 0
});
}else{
write("Votre Navigateur ne supporte pas" +
" la geolocalissation avec HTML5");
}
En cas d'une éventuelle erreur on aura un message d'erreur qui s'affichera.
4- Afficher la position sur la carte
Maintenant tout ce qui nous reste à faire, c'est d'afficher la position sur la carte, en
appelant la fonction findme(), qui elle-meme appelle la fonction localize() qui lui fournit les
coordonnées à afficher. On ajoute aussi la fonction write() qui affiche des messages à l'utilisateur.
function findme(){
localize();
var marker = new google.maps.Marker({
position : myPosition,
map : map,
title : "Here you are!"
});
}
function write(msg){
document.getElementById("info").innerHTML = msg;
}
var map;
var crd;
var myPosition;
Le code Html de la page est le suivant.
<html>
<head>
<script type="text/javascript" src="js/geolocalisation.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
</head>
<body onload="init()">
<div id="map" width="800px" height="500px">
<div>
<span id="info"><span>
</body>
</html>
Il faut aussi ajouter que la localisation de l'utilisateur ne peut se faire qu'avec son accord,
pour eviter des intrusions dans sa vie privée. Sil décide de ne pas autoriser sa localisation, vous
n'y pouvez rien.
Bientot vous aurez un autre article entièrement consacré aux cartes.
Alors en attendant amusez-vous bien, et vive HTML5. Et voici de quoi tout ce dont nous avons
parlé a l'air.
5- Apercu
LA carte ne s'affiche pas malheureusement. Un problème avec BLOGGER. J'espère le résoudre bientot.
RépondreSupprimerOK. Maintenant le problème d'affichage de carte est réglé.......Merci pour votre patience
RépondreSupprimerElle est coupée au niveau de OCEAN INDIEN sur la carte.
RépondreSupprimerBonne article tout de même.
il faut noter qu'on peut télécharger l'API et l'utiliser avec jquery pour un developpement en local.
A+