Google Place Autocomplete

La logique

API Key Google Map

<!-- Include Google Maps JS API --> <script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?libraries=places&key=PUT_YOUR_OWN_KEY_HERE"></script>  <!-- Custom JS code to bind to Autocomplete API --> <!-- find it here: https://github.com/lewagon/google-place-autocomplete/blob/gh-pages/autocomplete.js --> <!-- We'll detail this file in the article --> <script type="text/javascript" src="autocomplete.js"></script>

Le formulaire HTML

<form>   <label>Address</label>   <input id="user_input_autocomplete_address" placeholder="Votre adresse...">   <label>street_number</label>   <input id="street_number" name="street_number" disabled>   <label>route</label>   <input id="route" name="route" disabled>   <label>locality</label>   <input id="locality" name="locality" disabled>   <label>country</label>   <input id="country" name="country" disabled> </form>

La recherche

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);   } }

<input id="user_input_autocomplete_address" placeholder="Start typing your address...">

La récupération des données

function onPlaceChanged() {     var place = this.getPlace();   // console.log(place);  // Uncomment this line to view the full object returned by Google API.      for (var i in place.address_components) {         var component = place.address_components[i];              for (var j in component.types) {         // Some types are ["country", "political"]             var type_element = document.getElementById(component.types[j]);                    if (type_element) {                 type_element.value = component.long_name;       }         }     } }

{     "address_components": [         { "long_name": "25", "types": [ "street_number" ] },         { "long_name": "Petit Musc St", "types": [ "route" ] },         { "long_name": "Paris",         "types": [ "locality", "political" ] }         // [...]     ] }

<form>   <input id="street_number" name="street_number" disabled>   <input id="route" name="route" disabled>   <input id="locality" name="locality" disabled>   <input id="country" name="country" disabled> </form>

Exécuter le code

google.maps.event.addDomListener(window, 'load', function() {     initializeAutocomplete('user_input_autocomplete_address'); });

Pour aller plus loin

var defaultBounds = new google.maps.LatLngBounds(     new google.maps.LatLng(48.856614, 2.3522219000000177),     new google.maps.LatLng(51.5073509, -0.12775829999998223) );  var input = document.getElementById('searchTextField');var options = {    bounds: defaultBounds,    types: ['establishment'] };  autocomplete = new google.maps.places.Autocomplete(input, options);

Liens utiles

• - lewagon/google-place-autocomplete sur GitHub
• - Démo
• - Google Autocomplete documentation