Ion-Searchbar with google.maps.places.SearchBox

Ionic Framework ionic-v3
1

Hi,

im trying to integrate the google.maps.places.SearchBox into my ion-searchbar.

Anyone did this on Ionic2 RC before and can help me with this ?

the places.SearchBox() expects an HTMLInputElement to work with, but i cant extract this from the ion-searchbar Element.

Thank you :slight_smile:

2 Likes
2

Any updates on this?

Currently I did this with: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

This uses input tag. If anyone has any better solution to do this, please help.

That works fine : I found this issue though:

  • No text-clear button.
    (Did it manually by adding close button at the end of search-bar.
    On-click will clear the text.
    But, then keyboard disappears after pressing close, which is correct behaviour ideally, but, I want it to stay).
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
4

This worked incredibly well. Even for worldwide searches, like i needed. Thanks! I may have read a few other of your posts,
and all are very practical and work well.

here’s a workable function to zoom to the location you’re looking for. In my case it’s vineyards and specific regions. so just search for say, Napa Valley, or Francis Ford Coppola Winery, and,

gotoLocation(){

let place = document.getElementsByClassName(‘searchbar-input’)[0];
var placeLat = this.autocomplete.gm_accessors_.place.Fc.place.geometry.viewport.f.f;
var placeLong = this.autocomplete.gm_accessors_.place.Fc.place.geometry.viewport.b.b;
let latLng = new google.maps.LatLng(placeLat, placeLong);
let mapOptions = {
center: latLng,
zoom:12,
mapTypeId: google.maps.MapTypeId.HYBRID
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}

you’re there

1 Like
5

I am also trying to implement the same.What was your implementation method. Could you please share a demo of your code?
Thanks

6

Hey @Schmidt, It’s working for me but now I’m not able to detect the click event on the drop-down locations, do you know how to get that location and set the lat, long on the map?

7

Hey @Schmidt, no worries :wink:

Found the solution.

    google.maps.event.addListener(this.autocomplete, 'place_changed', () => {
     	      let place = this.autocomplete.getPlace();
 	      this.pointer.lat = place.geometry.location.lat();
 	      this.pointer.lng = place.geometry.location.lng();
 	      this.setLatLong(this.pointer.lat, this.pointer.lng, place);
    });

Thanks

1 Like
8

Hello @Code_Crash. I implement this code in my project and it does not work!.
Could you share an example for me ??. Thank a lot

9

nice one, useful. @Schmidt