HTML CSS Javascript jQuery AJAX PHP Java MORE

How to add google location API in multiple input box in same page Javascript

❮ Previous Next ❯ 
<!DOCTYPE html>
<html>
<body>

<input id="query-0" class="query" type="text"/>
<input id="query-1" class="query" type="text"/>
<input id="query-2" class="query" type="text"/>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAiYn74tyGdnPn3eTZm6b6RcuaQq92vD&libraries=places"></script>
<script>
var inputs = document.getElementsByClassName('query');

var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

var autocompletes = [];

for (var i = 0; i < inputs.length; i++) {
  var autocomplete = new google.maps.places.Autocomplete(inputs[i], options);
  autocomplete.inputId = inputs[i].id;
  autocomplete.addListener('place_changed', fillIn);
  autocompletes.push(autocomplete);
}

function fillIn() {
  console.log(this.inputId);
  var place = this.getPlace();
  console.log(place. address_components[0].long_name);
}
</script>

</body>
</html>
❮ Previous Next ❯