Ion-Searchbar with google.maps.places.SearchBox

Ionic Framework ionic-v3
3

First I used the input field to, but I didn’t liked the behavior. So call the ion-searchbar with this workaround.

ionViewLoaded() {
    let elem = <HTMLInputElement>document.getElementsByClassName('searchbar-input')[0];
    this.autocomplete = new google.maps.places.Autocomplete(elem);
}

This helps me out, but it isn’t so clean to call an element this way. To complete the answer, here my searchbar:

<ion-searchbar 
    [(ngModel)]="address" 
    (setAddress)="getAddress($event)" 
></ion-searchbar>

and the function

getAddress(place: Object) {       
    this.address = place['formatted_address'];
    var location = place['geometry']['location'];
    var lat =  location.lat();
    var lng = location.lng();
    console.log('Address Object', place);
}

You should declare autocomplete: any; on top. :wink:

5 Likes