Remplissage automatique d’un formulaire d’adresse avec Google Place autocomplete

Dans le but d’améliorer l’expérience utilisateur des internautes, l’aide au remplissage des formulaires de façon automatique peut être intéressante.

Pour cela Google Place autocomplete permet de remplir automatiquement les champs d’adresses (rue, ville, code postal, pays) à partir d’une proposition de Google.

google_place_02 google_place_03

 

 

 

 

Pour commencer dans votre page html, faire appel à l’API Javascript Places Autocomplete

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=votre_cle_api" type="text/javascript">

N’oubliez pas de remplacer votre_cle_api par votre api key que vous pouvez obtenir ici.

Maintenant, dans votre fichier HTML, il faut créer un formulaire comme celui-ci

<form>
    <div>
      <label>Adresse</label>
      <input id="user_input_autocomplete_address" placeholder="Votre adresse...">
    </div>
 
    <div>
      <label>Numéro</label>
      <input id="street_number" name="street_number" disabled>
    </div>
 
    <div>
      <label>Route</label>
      <input id="route" name="route" disabled>
    </div>
 
    <div>
      <label>Code postal</label>
      <input id="postal_code" name="postal_code" disabled>
    </div>
 
    <div>
      <label>Ville</label>
      <input id="locality" name="locality" disabled>
    </div>
 
    <div>
      <label>Pays</label>
      <input id="country" name="country" disabled>
    </div>
 
    <div>
      <label>Latitude</label>
      <input id="latitude" name="latitude" disabled>
    </div>
 
    <div>
      <label>Longitude</label>
      <input id="longitude" name="longitude" disabled>
    </div>
  </form>

L’id de chacun des champs a son importance pour que toutes les informations de l’api soient correctement replacées dans les champs appropriés.

Maintenant, un peu de javascript pour faire la liaison entre l’api et le formulaire.

<script type="text/javascript">
  // Lie le champs adresse en champs autocomplete afin que l'API puisse afficher les propositions d'adresses
  function initializeAutocomplete(id) {
    var element = document.getElementById(id);
    if (element) {
     var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
     google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
    }
  }
 
  // Injecte les données dans les champs du formulaire lorsqu'une adresse est sélectionnée
  function onPlaceChanged() {
    var place = this.getPlace();
 
    for (var i in place.address_components) {
      var component = place.address_components[i];
      for (var j in component.types) {  
        var type_element = document.getElementById(component.types[j]);
        if (type_element) {
          type_element.value = component.long_name;
        }
      }
    }
 
    var longitude = document.getElementById("longitude");
    var latitude = document.getElementById("latitude");
    longitude.value = place.geometry.location.lng();
    latitude.value = place.geometry.location.lat();
  }
 
  // Initialisation du champs autocomplete
  google.maps.event.addDomListener(window, 'load', function() {
    initializeAutocomplete('user_input_autocomplete_address');
  });
</script>

Et voilà, une façon simple de proposer aux internautes une aide à la saisie pour la partie adresse.

Source : https://www.lewagon.com/blog/tuto-google-place-autocomplete

2 réflexions au sujet de « Remplissage automatique d’un formulaire d’adresse avec Google Place autocomplete »

  1. Un problème: les champs ne sont pas effacés entre chaque recherche. Si par exemple l’utilisateur a commis une erreur et modifie son adresse et si cette nouvelle adresse ne contient par exemple pas de numéro de rue, le précédent numéro va rester dans les champs

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.