input adresse ville automatique

Solutions on MaxInterview for input adresse ville automatique by the best coders in the world

showing results for - "input adresse ville automatique"

14 Jan 2020

1<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=votre_cle_api" type="text/javascript">
2

source

Emmie

07 Nov 2017

1"use strict";
2
3// This example requires the Drawing library. Include the libraries=drawing
4// parameter when you first load the API. For example:
5// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&libraries=drawing">
6
7  function initializeAutocomplete(id) {
8        var element = document.getElementById(id);
9        if (element) {
10         var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
11         google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
12        }
13      }
14
15      // Injecte les données dans les champs du formulaire lorsqu'une adresse est sélectionnée
16      function onPlaceChanged() {
17        var place = this.getPlace();
18
19        for (var i in place.address_components) {
20          var component = place.address_components[i];
21          for (var j in component.types) {
22            var type_element = document.getElementById(component.types[j]);
23            if (type_element) {
24              type_element.value = component.long_name;
25            }
26          }
27        }
28
29        var longitude = document.getElementById("longitude");
30        var latitude = document.getElementById("latitude");
31        longitude.value = place.geometry.location.lng();
32        latitude.value = place.geometry.location.lat();
33      }
34
35      // Initialisation du champs autocomplete
36      google.maps.event.addDomListener(window, 'load', function() {
37        initializeAutocomplete('user_input_autocomplete_address');
38      });

Livio

23 Oct 2016

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Drawing Tools</title>
5    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
6       <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB66GfQcN_lknxN1jwSMo12GPva-fOMPq8&libraries=places" type="text/javascript">  </script>
7
8    <!-- jsFiddle will insert css and js -->
9  </head>
10  <body>
11     <form>
12    <div>
13      <label>Adresse</label>
14      <input id="user_input_autocomplete_address" placeholder="Votre adresse...">
15    </div>
16
17    <div>
18      <label>Numéro</label>
19      <input id="street_number" name="street_number" disabled>
20    </div>
21
22    <div>
23      <label>Route</label>
24      <input id="route" name="route" disabled>
25    </div>
26
27    <div>
28      <label>Code postal</label>
29      <input id="postal_code" name="postal_code" disabled>
30    </div>
31
32    <div>
33      <label>Ville</label>
34      <input id="locality" name="locality" disabled>
35    </div>
36
37    <div>
38      <label>Pays</label>
39      <input id="country" name="country" disabled>
40    </div>
41
42    <div>
43      <label>Latitude</label>
44      <input id="latitude" name="latitude" disabled>
45    </div>
46
47    <div>
48      <label>Longitude</label>
49      <input id="longitude" name="longitude" disabled>
50    </div>
51  </form>
52  </body>
53</html>