Google autocomplete API for multiple text fields
I am trying 3 windows to use google API javascript to offer suggestions when filling in addresses. But unfortunately it only works for 1 Base city textbox. The other two don't respond to javascript
Javascript
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
</script>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loc" name="City" class="form-control" >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Location" class="form-control" >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location" class="form-control" >
</div>
</div>
+3
source to share
2 answers
The problem is that you have three divs with the same id = "loc"; however, the identifier must be unique. So when you run your code, when the compiler sees the first identifier, it uses it and it doesn't go further to look for the next one.
To fix this, you need to provide different IDs for each div and create an autocomplete variable for each div. You could create separate listeners as well, but I'll leave that to you.
var autocomplete1 = new google.maps.places.Autocomplete($("#loc1")[0], {});
var autocomplete2 = new google.maps.places.Autocomplete($("#loc2")[0], {});
var autocomplete3 = new google.maps.places.Autocomplete($("#loc3")[0], {});
google.maps.event.addListener(autocomplete1, 'place_changed', function () {
var place = autocomplete1.getPlace();
console.log(place.address_components);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<body>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loc1" name="City" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="loc2" name="Location" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Work Location</label>
<div class="col-md-3">
<input type="text" id="loc3" name="Work_Location" class="form-control">
</div>
</div>
</body>
0
user5120285
source
to share
function initialize() {
//debugger;
// Create the autocomplete object, restricting the search
// to geographical location types.
var clsname = document.getElementsByClassName('autocomplet');
for (var i = 0; i < clsname.length; i++) {
var id = clsname[i].id;
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(id)), {
types: ['geocode']
});
}
}
0
source to share