22 nov 2016
Gmap1-620x286

Recherche d’adresse avec Google Place API

Souvent dans notre parcours de développeur nous avons eu besoin
d’un champ qui vienne répertorier les adresses d’un pays pour pouvoir récupérer
celle d’un utilisateur par exemple.

Désormais, grâce à Google et sa multitude d’API plus particulièrement Google Place,
cela devient d’une simplicité déconcertante comme nous allons le voir de suite.

Commençons

Activation de l’API

La première chose à faire pour pourvoir utiliser les API de google est de se créer une clé (token)
afin de pourvoir accéder à toutes ces fonctionnalités.

Rendez-vous à cette adresse muni de votre compte google.
https://console.developers.google.com/flows/enableapi?apiid=places_backend&keyType=SERVER_SIDE&reusekey=true&hl=fr&pli=1
Une fois fait  vous pouvez avoir un aperçu des API  existantes. Lien ci-dessous.
https://console.developers.google.com/apis/api/places_backend/overview?project=maximal-furnace-145410&authuser=1&duration=P4D

Il faut dans un second temps activer l’API en cliquant sur « Google Places API Web Service ».

Du coté de votre projet

Dans votre layout (page html/php) inséré le script qui va faire appel à l’API et permettre d’initialiser les champs voulus.


<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&language=fr&key="></script>

Imaginions que vous ayez un formulaire dans lequel se trouve un champ « adresse » comme suit :


<input class="form-control input-lg" id="origin" type="text" name="Name" placeholder="Adresse de départ..." required="" />

Pour en faire un champ d’auto complétion d’adresse nous allons simplement donner le champ suivant à notre fonction. Ici nous donnons les paramètres « country » afin d’avoir une restriction sur un pays précis.(ici la France)

document.addEventListener('DOMContentLoaded', function() {
    autocomplete = new google.maps.places.Autocomplete(
       (document.getElementById('origin')),
       { types: ['geocode'], componentRestrictions: {country: 'fr'} }
    );
}, false);

Voilà ! en chargeant votre page vous pouvez voir votre champ qui propose une liste d’adresses ‘auto complétion’ au fur et à mesure de votre saisie dans le champ « adresse »

N’hésitez pas à vous référer à la documentation de google pour faire le tour des possibilités de cette API vraiment pratique.

Merci pour votre lecture. ;)

Laissez un commentaire