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.