Webmaster, ajouter une recherche de lieu à votre page avec Google

Il est parfois nécessaire de placer un champ dans un formulaire afin de localiser une place, plusieurs sites proposes des bases de données plus ou moins complètes et volumineuse contenant les informations telles que pays, régions, ville, code postale … En parallèle, il existe également des site qui propose d’obtenir ces informations avec une requête.

Limites des ces solutions

Avant de parler des limites, il y a un avantage à avoir une base de données qui contient toutes ces informations surtout si l’ont ne dispose pas d’accès internet mais il faut disposer d’espace de stockage suffisant, ensuite la seconde solution n’aura pas forcément la précision que l’on souhaiterai.

  •  Problème d’espace de stockage
  • Problème de précision
  • limite du nombre de requêtes par jour

Quelle solution choisir : Google ?

J’imagine qu’il y aura des anti-google dans les lecteurs mais pourtant, allez jusqu’au bout, donc certe, il vous faudra un compte google (ahh noooooooooonnnnn  => article ), bon je vous rassure tout de suite, je n’en fait pas partie et j’accepte cette surveillance (une société privé qui récupère les données pour me proposer des liens commerciaux ou pas qui ont des chances de m’intéresser reste mieux qu’un état qui  collecte des données sans notre consentement).

Rappelons aussi que sur internet, quand c’est gratuit, c’est vous le produit.

Oui, Google met à disposition un nombre important d’API qui vont vous simplifier la vie et vous feront bénéficier de l’expérience Google, dans notre cas, il s’agira de Maps. Voici un accès à Google for developpers.

Utilisation de Google Places API Web Service et le service Place Autocomplete

Les limites d’utilisation

Bon, il y a tout de même des limites à l’utilisation (à l’heure de la rédaction de cette article) :

  • 1000 requêtes gratuites par tranche de 24 heures => si peu
  • jusqu’à 150000 requêtes gratuites après avoir validé le service par carte bancaire (sans retrait d’argent)
  • accepter et respecter les conditions d’utilisations

Les détails ici.

Obtention de la clé API

Vous allez avoir besoin d’un compte Google, commencer par en créer si vous n’en avez pas encore. puis rendez-vous sur la console développeur de Google.

Accueil de la console développeur Google
Accueil de la console développeur Google

Créez un nouveau projet et sélectionnez le :

API Google map, création et sélection de projet
API Google map, création et sélection de projet

Ensuite activer « Google Places API Web Service » et « Google Maps JavaScript API  » pour les trouver, allez dans la bibliothèque d’API.

Pour utiliser l’API, nous allons avoir besoin d’un identifiant, pour cela cliquer sur « Créer des identifiants » :

google Map, créer un identifiant
google Map, créer un identifiant

Vous devriez tomber sur cette page :

console développeur google ajouter un identifiant
console développeur google ajouter un identifiant

Sélectionner « Google Places API Web Service » puis cliquer sur « De quels identifiants ai-je besoin« . Noter votre clé qui apparaît.

Pensez à restreindre l’accès à votre clé pour éviter de vous la faire voler.

Utilisation de la saisie semi-automatique

Pour illustrer cet article, je vous invite à vous rendre sur le site tuto.surleweb-france.fr.

Créer une page classique et y intégrer le script pour l’API :

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

Bien entendu, remplacer YOUR_API_KEY par votre clé.

Ensuite, nous allons placer notre script :

<script>
  // This example displays an address form, using the autocomplete feature
  // of the Google Places API to help users fill in the information.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

  var placeSearch, autocomplete;
  var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
</script>

Enfin notre formulaire (vous pouvez très bien le placer à avant le script :

<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address"
         onFocus="geolocate()" type="text"></input>
</div>

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField"><input class="field" id="street_number"
          disabled="true"></input></td>
    <td class="wideField" colspan="2"><input class="field" id="route"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">City</td>
    <!-- Note: Selection of address components in this example is typical.
         You may need to adjust it for the locations relevant to your app. See
         https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
    -->
    <td class="wideField" colspan="3"><input class="field" id="locality"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField"><input class="field"
          id="administrative_area_level_1" disabled="true"></input></td>
    <td class="label">Zip code</td>
    <td class="wideField"><input class="field" id="postal_code"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3"><input class="field"
          id="country" disabled="true"></input></td>
  </tr>
</table>

Vous pouvez voir ce que cela donne sur tuto.surleweb-france.fr.

Conclusion

Ceci n’affiche pas une carte mais maintenant vous pouvez inclure dans vos formulaires, une localisation saisie par l’utilisateur en quelques minutes sans avoir à ajouter de base de données et de pouvoir profiter de l’expérience de google.

Pour la documentation de cette API, c’est ici.

 

Laisser un commentaire