Ce quatrième billet sur l'API Google Maps vous apprendra à afficher la carte d'un lieu à partir de son adresse. C'est ce que l'on nomme geocoding dans l'API, opération réalisée grâce à un objet JavaScript, le geocoder.

Partons de l'exemple 4 du billet précédent auquel nous ajoutons la variable globale geocoder. Le chargement du fichier JSON est remplacé par l'instanciation du geocoder dans la fonction load :

var geocoder; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); geocoder = new GClientGeocoder(); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

Nous ajoutons à la page un formulaire permettant la saisie de l'adresse cherchée. La validation du formulaire est interceptée par la fonction geocode qui prend en paramètre l'adresse saisie :

<form onsubmit="return geocode(this.address.value);"> Adresse : <input type="text" size="80" name="address" /> <input type="submit" value="GO" /> </form>

Cette fonction geocode, qui va faire tout le travail, est extrêmement simple :

function geocode(address) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = createMarker(point, address); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); return false; }

Elle consiste à appeler la fonction getLatLng du geocoder en lui passant en paramètre l'adresse saisie et une fonction appelée par le geocoder au retour de la requête HTTP. En cas de succès, on centre la carte sur le point correspondant à l'adresse, on créé un marqueur que l'on ajoute sur la carte et on affiche la fenêtre d'information.

Le résultat est visible sur l'exemple 5.

Les autres billets de cette série sur l'API Google Maps :