Using Google Places API and Autocomplete with Ionic 4

Ionic Native
#1

After getting Google Maps working in Ionic 4 I was excited to move on to setting up a search bar with the Places API and Autocomplete.

I’ve seen a few Ionic 3 tutorials for creating a provider that consumes the Places API - but I’m curious if here are any good tutorials or suggestions for implementing this functionality in Ionic 4?

Any suggestions appreciated.

4 Likes
#2

did you end up finding anything?

#3

yeah some heads up would be greate

#4

can any one provide me the code for autocomplete search in ionic 4

#5

you can do something like this…

html:

<ion-searchbar #searchbar></ion-searchbar>

component:

@ViewChild('searchbar', {read: IonSearchbar}) searchbar: IonSearchbar;

...

this.googleAutocomplete = new google.maps.places.Autocomplete(await this.searchbar.getInputElement());

    this.googleAutocomplete.addListener('place_changed', () => {
      // do whatever here
    });
1 Like
#6

Did you find anything? If you can please share.

#7

Hello guys, just trying to find out if there is anything, I have seen a couple of things but nothing is pointing at the right direction… :frowning:

Google maps autocomplete integration
#8

Hi guys,

Just worked out how to make it as I was getting a bit desperate with the plugin so I just tried without it… In order to test the autocomplete I just

first npm install --save @types/googlemaps

Then I set up home.ts

import { Component, NgZone } from '@angular/core';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  GoogleAutocomplete: google.maps.places.AutocompleteService;
  autocomplete: { input: string; };
  autocompleteItems: any[];
  location: any;
  placeid: any;

  constructor(
    public zone: NgZone,
  ) {
    this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
    this.autocomplete = { input: '' };
    this.autocompleteItems = [];
  }

  updateSearchResults(){
    if (this.autocomplete.input == '') {
      this.autocompleteItems = [];
      return;
    }
    this.GoogleAutocomplete.getPlacePredictions({ input: this.autocomplete.input },
    (predictions, status) => {
      this.autocompleteItems = [];
      this.zone.run(() => {
        predictions.forEach((prediction) => {
          this.autocompleteItems.push(prediction);
        });
      });
    });
  }
  selectSearchResult(item) {
    console.log(item)
    this.location = item
    this.placeid = this.location.place_id
    console.log('placeid'+ this.placeid)
  }
  GoTo(){
    return window.location.href = 'https://www.google.com/maps/place/?q=place_id:'+this.placeid;
  }
}

And just a simple home.page.html to test it…

<ion-header>
  <ion-toolbar color="primary">
    <ion-searchbar [(ngModel)]="autocomplete.input" (ionInput)="updateSearchResults()" placeholder="Search for a place"></ion-searchbar>
  </ion-toolbar>
  <ion-list [hidden]="autocompleteItems.length == 0">
    <ion-item *ngFor="let item of autocompleteItems" tappable (click)="selectSearchResult(item)">
      {{ item.description }}
    </ion-item>
  </ion-list>
</ion-header>

<ion-content> 
    <ion-button (click)="GoTo()" >Go To Selected Location</ion-button>
</ion-content>

Don’t forget to put your API in index.html, based on source -> https://ionicthemes.com/tutorials/about/ionic-2-google-maps-google-places-geolocation

And yes, code is not brilliant and not optimised but I prefered to be redundant so it’s easier to follow.

4 Likes
#11

You can have a look at

#12

Thanks, it works for me.
I made only one correction, I think it is more correct to use (ngModelChange) instead of (ionInput) in the ion-searchbar, in this way the search occurs simultaneously with the change of the value in the input.

My version

<ion-searchbar [(ngModel)]="autocomplete.input" (ngModelChange)="updateSearchResults()" placeholder="Search for a place"> </ion-searchbar>
#13

Hi @Ragone,

Thanks!! it’s a good tip! However watch out the number of queries you make to google! :slight_smile: they are not cheap,

Some months ago they change the billing model and prices increased a lot :frowning:

1 Like
#14

Hi everyone,
Just wanted to say I have released a small npm package to achieve automplete with google places api for ionic-angular, you can check it out here : https://www.npmjs.com/package/ngx-autocom-place

Hope it helps

2 Likes
#15

Thanks a lot !! it’s Work for me