Syntaxe javascript Place Autocomplete [google adress]

Bonjour,

J'ai un petit soucis de syntaxe avec un script qui permet de remplir les champs d'un formulaire lorsqu'on utilise le service Autocomplete de google Address.

J'ai utiliser ce script dans la doc de google : https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=fr

Ca fonctionne très bien SAUF que j'utilise 2 champs Autocomplete sur ma page je n'arrive pas à faire fonctionner les 2 en même temps.

Mon code JS:

// autocomplete des adresses
var destination_autocomplete, origin_autocomplete, destination_autocomplete;
var input1 = document.getElementById('origin');
var input2 = document.getElementById('destination');

origin_autocomplete = new google.maps.places.Autocomplete(input1);
origin_autocomplete.addListener('place_changed', fillInAddress);
destination_autocomplete = new google.maps.places.Autocomplete(input2);
destination_autocomplete.addListener('place_changed', fillInAddress2);

var componentForm = {
  country: 'long_name',
  postal_code: 'short_name'
};
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = origin_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;
    }
  }
}

var componentForm2 = {
  country2: 'long_name',
  postal_code2: 'short_name'
};
function fillInAddress2() {
  // Get the place details from the autocomplete object.
  var place2 = destination_autocomplete.getPlace();

  for (var component2 in componentForm2) {
    document.getElementById(component2).value = '';
    document.getElementById(component2).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 < place2.address_components.length; i++) {
    var addressType = place2.address_components[i].types[0];
    if (componentForm2[addressType]) {
      var val2 = place2.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val2;
    }
  }
}

Mon code HTML:

<form id="multiphase" name="Formbooking" method="post" action="#">
	<div>
		<label for="origin">Adresse départ</label>
		<div>
			<input type="text" name="origin" id="origin" placeholder="Entrez votre adresse de départ">
		</div>
	</div>
	<div>
		<div>
			<input type="text" name="postal_code" id="postal_code" readonly>
			<input type="text" name="country" id="country" readonly>
		</div>
	</div>

	<div>
		<label for="destination">Adresse arrivée</label>
		<div>
			<input type="text" name="destination" id="destination" placeholder="Entrez votre adresse d'arrivée">
		</div>
	</div>
	<div>
		<div>
			<input type="text" name="postal_code2" id="postal_code2" readonly>
			<input type="text" name="country2" id="country2" readonly>
		</div>
	</div>
</form>

Merci de votre aide [/i][/i][/i][/i]
Modifié par Nicolas-Asso (21 Sep 2016 - 12:37)

Bonjour.

Nicolas-Asso a écrit :

Ca fonctionne très bien SAUF que j'utilise 2 champs Autocomplete sur ma page je n'arrive pas à faire fonctionner les 2 en même temps.

Un des deux fonctionne ou aucun fonctionne ?