Hi,
Google maps autocomplete on place select the values are not getting bind to the input fields in iOS and it is working perfectly on iOS. Tried adding stopPropagation but after that it works only once , the second time when we try to do the same it is not working. Find below the sample code which i tried.
Help me solve this error, I have been trying to fix this issue for weeks ,
ngOnInit()
{
this.mapsAPILoader.load().then(
() => {
var nativeHomeInputBox = document.getElementById('placeSeacrch').getElementsByTagName('input')[0];
let autocomplete:any ="";
autocomplete = new google.maps.places.Autocomplete(nativeHomeInputBox, {
types:['address'],
componentRestrictions: {country: 'IN' }
})
autocomplete.addListener('place_changed',()=>{
this.ngZone.run(() => {
let place : google.maps.places.PlaceResult = autocomplete.getPlace();
if( place.geometry === undefined || place.geometry === null )
{
return;
}
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.formattedAddress = place.formatted_address;
this.loadMap(this.latitude,this.longitude);
console.log(place.address_components);
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (this.componentForm[addressType]) {
var val = place.address_components[i][this.componentForm[addressType]];
//let field =document.getElementById(addressType);
switch(addressType)
{
case 'route':
this.address = val;
break;
case 'street_number':
this.street_number = val;
break;
case 'locality':
this.city = val;
break;
case 'postal_code':
this.postal = val;
break;
}
//console.log(field);
}
}
});
});
/*************** For iOS *******************/
// need to stop prop of the touchend event
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
setTimeout(function() {
var container = document.getElementsByClassName('pac-container')[0];
container.addEventListener('touchend', function(e) {
e.stopImmediatePropagation();
//e.preventDefault();
});
}, 500);
}
/***********************************************/
}
);
}