I am trying to implement multiple google address validation
in a form (on arround 5 places). I am using basic script provided by google it-self with minor changes. But unfortunately got stuck in an error in console.
I am calling a function onFocus
and passing parameter in that, then passing those parameters to append search results as:
Address field:
<input autocomplete="off-false" class="v-validate" type="text" id="institution-street-address" name="street-address-institution" data-validate="{required:true}" onfocus="geolocate('institution-street-address','institution-city')" />
Script:
<script>
var placeSearch, autocomplete;
var componentForm = {
//street_number: 'short_name',
//route: 'long_name',
locality: 'long_name',
//administrative_area_level_1: 'short_name',
//country: 'long_name',
//postal_code: 'short_name'
};
function geolocate(idMainTab,cityId) {
console.log('hi5');
autocomplete = new google.maps.places.Autocomplete(
document.getElementById(idMainTab), {types: ['geocode']});
//autocomplete.setFields('address_components');
autocomplete.addListener('place_changed', fillInAddress(cityId));
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle(
{center: geolocation, radius: position.coords.accuracy});
autocomplete.setBounds(circle.getBounds());
});
}
}
function fillInAddress(cityId) {
var institutionForm = {
locality: cityId,
};
console.log(institutionForm);
// Get the place details from the autocomplete object.
var place = 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 then fill-in 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(institutionForm[addressType]).value = val;
}
}
}
</script>
I checked in console.log(institutionForm);
I am getting the value of cityId
passed.
I am constanly getting this error in console:
"Uncaught TypeError: Cannot read property 'address_components' of undefined".
Unable to figure out what doing wrong.
[Edit]:
I think there is something else then the duplicate reference was been provided, I added a try catch to handle undefined request but still Google address validation doesn't work:
What I did:
I changed fillInAddress(cityId) as:
function fillInAddress(cityId) {
// Get the place details from the autocomplete object.
var place = 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 then fill-in the corresponding field on the form.
try {
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
console.log(addressType);
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
console.log(val);
document.getElementById(institutionForm[addressType]).value = val;
}
}
} catch (e) {
console.log('in catch');
return e;
}
}
Now I am getting the previous error. On focus I am going in catch, but on appending address siggestions to city getting this error in console:
Uncaught TypeError: this.j.apply is not a function
Also I found some posts other as well pointing toward such errors: Passing google event data in addListener
But no luck unable to identify what the exact reason is.