Hi everyone, I hope you're all doing well :)
In my development of a basic application using Ionic Framework with Google Maps (Map + Places SearchBox), everything is working smoothly until I encounter an issue when trying to search for an address (e.g. Morena Blvd #1, San Diego, CA). The input displays the suggested addresses, but when I select one, it doesn't populate completely in my <ion-input> element...
The functionality works perfectly fine in my browser when running the app with ionic serve, but the problem arises on my iPhone or Android device. Has anyone faced a similar challenge before?
Below is the frontend code snippet:
<ion-content no-padding>
<ion-searchbar #searchAddress id="searchAddress" [showCancelButton]="false" [(ngModel)]="address">
</ion-searchbar>
Additionally, this is how I'm setting the SearchBox instance for the inner input control of my ion-searchbar...
@ViewChild('searchAddress', {read: ElementRef}) searchElement: ElementRef;
...
...
...
...
let input = this.searchElement.nativeElement.querySelector('.searchbar-input');
let searchBox = new google.maps.places.SearchBox(input);
searchBox.addListener('places_changed', () => {
let places = searchBox.getPlaces();
if(!places && places.length === 0) return;
this.address = places[0].formatted_address;
this.latitude = places[0].geometry.location.lat();
this.longitude = places[0].geometry.location.lng();
if(places[0].address_components.length === 0) {
this.street = places[0].address_components[1].long_name;
this.selectedEstate = places[0].address_components[4].long_name;
}
});
Lastly, this code runs within my ionViewDidEnter() event.