<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=votre_cle_api" type="text/javascript">
"use strict";
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&libraries=drawing">
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);
}
}
// Injecte les données dans les champs du formulaire lorsqu'une adresse est sélectionnée
function onPlaceChanged() {
var place = this.getPlace();
for (var i in place.address_components) {
var component = place.address_components[i];
for (var j in component.types) {
var type_element = document.getElementById(component.types[j]);
if (type_element) {
type_element.value = component.long_name;
}
}
}
var longitude = document.getElementById("longitude");
var latitude = document.getElementById("latitude");
longitude.value = place.geometry.location.lng();
latitude.value = place.geometry.location.lat();
}
// Initialisation du champs autocomplete
google.maps.event.addDomListener(window, 'load', function() {
initializeAutocomplete('user_input_autocomplete_address');
});<!DOCTYPE html>
<html>
<head>
<title>Drawing Tools</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB66GfQcN_lknxN1jwSMo12GPva-fOMPq8&libraries=places" type="text/javascript"> </script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<form>
<div>
<label>Adresse</label>
<input id="user_input_autocomplete_address" placeholder="Votre adresse...">
</div>
<div>
<label>Numéro</label>
<input id="street_number" name="street_number" disabled>
</div>
<div>
<label>Route</label>
<input id="route" name="route" disabled>
</div>
<div>
<label>Code postal</label>
<input id="postal_code" name="postal_code" disabled>
</div>
<div>
<label>Ville</label>
<input id="locality" name="locality" disabled>
</div>
<div>
<label>Pays</label>
<input id="country" name="country" disabled>
</div>
<div>
<label>Latitude</label>
<input id="latitude" name="latitude" disabled>
</div>
<div>
<label>Longitude</label>
<input id="longitude" name="longitude" disabled>
</div>
</form>
</body>
</html>