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.

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">

1	<script src="https://maps.googleapis.com/maps/api/js?libraries=places&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>

<form>

<div>

<label>Adresse</label>

</div>

<div>

<label>Numéro</label>

</div>

<div>

<label>Route</label>

</div>

<div>

<label>Code postal</label>

</div>

<div>

<label>Ville</label>

</div>

<div>

</div>

<div>

<label>Latitude</label>

</div>

<div>

<label>Longitude</label>

</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>

// 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

3 réponses sur “Remplissage automatique d’un formulaire d’adresse avec Google Place autocomplete”

Simon Tripnaux dit :

10 octobre 2016 à 15 h 49

Le genre de petit script qui peut vraiment aider les sites e-commerce ! Merci pour l’astuce !

Répondre
Maxence Malbois dit :

19 décembre 2016 à 14 h 21

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

Répondre
salim dit :

3 août 2018 à 11 h 55

Un grand merci

Répondre