Using Google Places API and Autocomplete with Ionic 4

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.


did you end up finding anything?

yeah some heads up would be greate

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

you can do something like this…


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


@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

Did you find anything? If you can please share.

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:

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';

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

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

    if (this.autocomplete.input == '') {
      this.autocompleteItems = [];
    this.GoogleAutocomplete.getPlacePredictions({ input: this.autocomplete.input },
    (predictions, status) => {
      this.autocompleteItems = []; => {
        predictions.forEach((prediction) => {
  selectSearchResult(item) {
    this.location = item
    this.placeid = this.location.place_id
    console.log('placeid'+ this.placeid)
    return window.location.href = ''+this.placeid;

And just a simple to test it…

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

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

Don’t forget to put your API in index.html, based on source ->

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


You can have a look at

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>

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

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 :

Hope it helps


Thanks a lot !! it’s Work for me