Google Maps V3 : ajouter un champ autocomplete des adresses

par jv.laurent 26 juil 2012 0 commentaires autocomplete / autocomplete adresse / didacticiel / Google / google maps / google maps api v3 / places / places autocomplete / trucs et astuces

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

L'autre jour nous avons vu comment afficher un calcul d'itinéraire avec Google Maps API V3. Aujourd'hui je vous propose d'aller encore un peu plus loin avec l'ajout d'un autocomplete d'adresse. L'objectif est d'afficher des suggestions d'adresse en fonction de ce que l'utilisateur indique dans un champ texte. Là encore, la base de données colossale de Google Maps va nous permettre de proposer des adresses pertinentes et exhaustives.

Si vous êtes un(e) habitué(e) des wikis Google Dev, vous avez pu voir que nous parlons de Places Library et de son Places autocomplete.

Tout d'abord, il faut charger la Places Library. L'inclusion se fait de manière similaire à un appel Google Maps API classique:
<script type="text/javascript" src="<a href="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>">http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false...
Vous remarquerez le paramètre libraries=places qui vient s'ajouter à l'url classique. Cette inclusion de script javascript se substitue à l'appel standart.

La V3 de la Google Maps API est orienté objet, vous devez donc logiquement créer une instance de PlacesService

var options = {

   types: ['(cities)'],

   componentRestrictions: {country: 'ca'}

};

var input = document.getElementById('where');

autocomplete = new google.maps.places.Autocomplete(input, options);

L'objet Autocomplete prend deux paramètres pour son constructeur. "input" fait référence à l'élément DOM sur lequel nous souhaitons faire l'autocomplete, c'est à dire notre champ texte de recherche. "Options" regroupe plusieurs paramètres pour filtrer les résultats. Ici, nous préçisons que nous voulons des suggestions de type "Ville" avec comme restriction géographique la zone du Canada.

Parmi les autres options de type disponibles citons : route, country, postal_code, airport, cafe, ...
Vous pouvez consulter la liste exhaustive des types de lieux que Google Maps a trié dans ses registres.

Rajoutons ensuite la possibilité de modifier le centre de la carte en fonction de la suggestion d'adresse sélectionnée.
Tout se joue sur l'écoute de l'événement place_changed :

google.maps.event.addListener(autocomplete, 'place_changed', function() {

   var place = autocomplete.getPlace();

   if (place.geometry.viewport) {

      geomap.fitBounds(place.geometry.viewport);

   } else {

      geomap.setCenter(place.geometry.location);

      geomap.setZoom(17);

   }

});

Comme vous constatez, la fonction getPlace() nous permet de récupérer les coordonnées de l'adresse choisie pami les propositions de l'autocomplete. Au passage, je réaffecte un zoom de 17 pour avoir une vue d'ensemble de la plupart des villes de taille moyenne.

Comme toujours, si ces exemples ne vous suffisent pas, la meilleure des sources reste la documentation officielle de Places Autocomplete.