Ajouter un champ adresse avec autocomplétion dans Webflow grâce à l'API Google Maps

outils :

Sommaire

Text Link

Pourquoi ajouter un champ adresse avec autocomplétion ?

Amélioration de l'Expérience Utilisateur

‍Facilité d'Utilisation : L'autocomplétion peut aider les utilisateurs à trouver et entrer leurs adresses plus rapidement et plus facilement.

Réduction des Erreurs : Elle peut réduire le risque d'erreur en suggérant des adresses valides.

Précision des Données

Normalisation : Les adresses saisies sont souvent normalisées selon un format standard, ce qui garantit la précision des données.
Validation : Elle permet de valider les adresses en temps réel, garantissant ainsi l'exactitude des informations reçues.

Efficacité

Gain de Temps : Cela réduit le temps que les utilisateurs passent à remplir les formulaires, ce qui est particulièrement utile sur les appareils mobiles où la saisie de texte peut être difficile.
Réduction de la Friction : Elle permet de minimiser les étapes nécessaires pour compléter un formulaire, réduisant ainsi les abandons de panier ou d'inscription.

Autant de facteurs vous permettant d'augmenter la conversion de votre formulaire et de fiabiliser vos données.

Voici comment faire !

Tutoriel pour ajouter un champ adresse mono field avec autocomplétion dans Webflow

‍

1. Créez un compte Google Cloud Console et accédez à Google Maps Plateform

Suivez le lien suivant pour vous y rendre !

Vous devriez voir afficher une modale avec votre clé API (cf screen ci dessous)

Copier votre clé API afin de l'avoir à porter de main, vous en aurez besoin pour les étapes suivantes.

‍

2. Ajoutez l'ID "address-input" à votre input dans Webflow

‍

3. Ajoutez ce code personnalisé dans votre page ou dans un embed dans votre formulaire

Veillez à bien ajouter votre clé API à la place de {API key} dans le premier et second code ci-dessous.

 <script src="https://maps.googleapis.com/maps/api/js?key={API key}&libraries=places&callback=initMap" async defer></script>

‍

 <script>
 "use strict";

    function initMap() {
      const CONFIGURATION = {
        "mapOptions": {"center":{"lat":37.4221,"lng":-122.0841},"fullscreenControl":true,"mapTypeControl":false,"streetViewControl":true,"zoom":11,"zoomControl":true,"maxZoom":22,"mapId":""},
        "mapsApiKey": "{API key}",
        "capabilities": {"addressAutocompleteControl":true,"mapDisplayControl":false,"ctaControl":false}
      };

      const addressInput = document.getElementById('address-input');
      const autocomplete = new google.maps.places.Autocomplete(addressInput, {
        fields: ["address_components", "geometry", "name"],
        types: ["address"],
      });

      autocomplete.addListener('place_changed', function () {
        const place = autocomplete.getPlace();
        if (!place.geometry) {
          window.alert('Aucun détail disponible pour: \'' + place.name + '\'');
          return;
        }
        fillInAddress(place);
      });

      function fillInAddress(place) {
        const addressNameFormat = {
          'street_number': 'short_name',
          'route': 'long_name',
          'locality': 'long_name',
          'administrative_area_level_1': 'short_name',
          'country': 'long_name',
          'postal_code': 'short_name',
        };
        
        let completeAddress = "";
        
        function getAddressComp(type) {
          for (const component of place.address_components) {
            if (component.types[0] === type) {
              return component[addressNameFormat[type]];
            }
          }
          return '';
        }
        
        completeAddress += getAddressComp('street_number') + ' ' + getAddressComp('route') + ', ';
        completeAddress += getAddressComp('locality') + ', ';
        completeAddress += getAddressComp('administrative_area_level_1') + ' ';
        completeAddress += getAddressComp('postal_code') + ', ';
        completeAddress += getAddressComp('country');
        
        addressInput.value = completeAddress;
      }
    }
</script>

‍