article de presse - Cap Data Consulting

D ossier
d'autre part, afin de placer des repères et informations
sur notre carte.
En guise d'exemple, nous allons utiliser les services
RPC de Geocoder.us afin de localiser des
adresses aux Etats-Unis*. Nous allons appeler
ce service distant, grâce à une fonction Ajax, qui
nous permettra de réactualiser la carte sans
avoir besoin de recharger la page.
Cette fonction se présente comme suit :
function update_map(address)
{
var request = null;
if(window.XMLHttpRequest)
request = new XMLHttpRequest();
// Firefox
else if(window.ActiveXObject)
request = new ActiveXObject
("Microsoft.XMLHTTP");
// Internet Explorer
else { alert("XMLHTTPRequest
indisponible"); return; }
Cette première partie sert uniquement à créer une
instance de XMLHttpRequest, ou XMLHTTP selon
le navigateur, afin de préparer notre requête AJAX.
request.setRequestHeader
("Content-type",
"application/x-www-form-urlencoded");
request.open("GET",
"http://rpc.geocoder.us/service/
csv?address="+escape(address), true);
request.send(null);
Ce bloc prépare puis exécute la requête, dans
laquelle nous avons spécifié l'adresse
du service distant et indiqué
l'adresse postale dont nous cherchons
les coordonnées (cette adresse
est saisie par l'utilisateur et
transmise à la fonction de mise à
jour de la carte dans le paramètre
address).
Afin de réagir dès que le service distant
nous transmet une réponse
favorable, on intercepte l'événement
onReadyStateChange de notre
objet XMLHttp :
request.onreadystatechange
= function() {
if(request.readyState =
= 4)
{
var coord =
request.responseText.split(',')
Maintenant que nous avons obtenu une réponse,
sous forme d'une ligne de champs séparée
par une virgule en cas de succès, de message
d'erreur sinon, on intervient sur la page :
// on teste la validité
de la réponse
if(coord.length > 1)
{
// l'adresse est bonne,
on peut exploiter le retour
// et on commence par effacer
les marqueurs déjà sur la carte pour
ne pas la surcharger
map.clearOverlays()
Les deux premiers champs contiennent respectivement
la longitude et la latitude de l'adresse recherchée.
Nous nous en servons pour créer un objet
Gpoint, qui permettra ensuite la création d'un marqueur,
et le centrage de la carte sur ce point :
var point = new GPoint
(coord[1], coord[0])
var marker = new GMarker(point)
map.addOverlay(marker)
map.centerAndZoom(point)
}
else
{
// l'adresse n'a pas été trouvée
alert("L'adresse recherchée
n'a pas été trouvée, veuillez vérifier
Programmez n°85 33 avril 2006
votre saisie.")
return
}
}
}
}
Avant de s'arrêter, nous allons voir une fonctionnalité
supplémentaire, qui nous permettra
de fournir à nos utilisateurs un peu plus d'informations
sur les points marqués, et accessoirement,
à comprendre le principe d'interception
d'événements vu par l'API Google.
Nous allons donc attacher à l'événement « click »
de notre marqueur l'affichage d'une bulle d'information
:
GEvent.addListener(marker, 'click',
function()
{
marker.openInfoWindowHtml
("Longitude : "+coord[1]+"Latitude : "
+ coord[0]);
})
Comme vous pouvez le constater, cette opération
est plutôt simple, et d'un abord assez classique.
Grâce à cette simple ligne de code, il sera désormais
possible de consulter les coordonnées de
l'adresse demandée d'un simple clic sur le marqueur
au centre de la carte.
Conclusion
Si aujourd'hui, la pertinence d'incorporer les services
Gmap à votre site est toute relative (à moins
bien sûr, que vous soyez un lecteur Québécois !),
mieux vaut se préparer à maîtriser cet outil, qui
risque de déferler en France dès que notre territoire
sera couvert.
En effet, il sera possible grâce à Gmaps, par
exemple, de proposer directement à ses visiteurs
d'établir un itinéraire pour se rendre dans vos
locaux. Il sera sans doute possible également
d'utiliser cette API pour des fonctions avancées,
comme des estimations de temps de trajet pour
des livraisons, des tournées, etc.
*Voici quelques exemples d'adresses valides :
1600 Pennsylvania Ave, Washington DC
West 42nd & Broadway, New York NY
1005 Gravenstein Highway North, Sebastopol CA
601 Whitehead St, Key West, FL
■ Gauthier Delamarre