Google AutocompleteService does not work

hello
am trying to implement autocomplete service, but unable to do so,
when I test the app on the browser, i got

ReferenceError: google is not defined

when i test it on a device, the page doesn’t appear, so i searched over the internet, and there were a lot of people suggesting to use platform.ready(), i used it i was able to get into the page, but it didn’t work as expected. here is my code:

import { Component, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController,Platform } from 'ionic-angular';


declare var google;
@IonicPage()
@Component({
  selector: 'page-auto-complete',
  templateUrl: 'auto-complete.html',
})
export class AutoCompletePage {
  autocompleteItems;
  autocomplete;
  ctr: HTMLElement = document.getElementById("q");
  service:any = new google.maps.places.AutocompleteService();
   geocoder:any = new google.maps.Geocoder();
  constructor(private platform:Platform,public viewCtrl: ViewController, private zone: NgZone) {
    this.autocompleteItems = [];
    this.autocomplete = {
      query: ''
    };
   //this is a solution i came up with to be able to get into the page.
    // this.platform.ready().then(data=>{
    //   this.service = new google.maps.places.AutocompleteService(this.ctr);
    //   this.geocoder = new google.maps.Geocoder();
      
    // })
  }
  dismiss() {
    this.viewCtrl.dismiss();
  }
  chooseItem(item: any) {
     
      this.geocoder.geocode({
        'placeId': item.place_id
      }, (responses) => {
        // send the place name
        // & latlng back
        this.viewCtrl.dismiss({
          description: item.description,
          latitude: responses[0].geometry.location.lat(),
          longitude: responses[0].geometry.location.lng()
        });
      });
    
    
  }

  
  updateSearch() {
    
    
      if (this.autocomplete.query == '') {
        this.autocompleteItems = [];
        return;
      }
      let that = this;
      
      this.service.getPlacePredictions({
        input: that.autocomplete.query,
        componentRestrictions: {
          country: 'BH'
        }
      }, (predictions, status) => {
      
        that.autocompleteItems = [];
        that.zone.run(function () {
          predictions = predictions || [];
          predictions.forEach(function (prediction) {
            that.autocompleteItems.push(prediction);
          });
        });
      });


    
    
  }
}

Some info :

51%20PM

hopefully i get some answers

1 Like

It would be extremely helpful, if i get any hints at least.