SOLVED. Ionic 2 Google Places Autocomplete onPageLoad or ngOnInit Android Device Issue

Ionic Framework ionic-v3
1

Sorry for the horrible title but I wanted to get every keyword in!

I’m having a real problem getting something to work and I’d really appreciate it if anyone could poke me in the right direction. I’m using the Google Places Autocomplete feature on a location search field in my app. In the component I have the following code which sets up the autocomplete listeners on the field.

ngOnInit(){

    let input_from = (<HTMLInputElement>document.getElementById("journey_from"));

    let options = {
      types: [],
      componentRestrictions: {country: "uk"}
    };


    let autocomplete = new google.maps.places.Autocomplete(input_from, options);
   
    let self = this;

    google.maps.event.addListener(autocomplete, 'place_changed', function() {

      let place = autocomplete.getPlace();
      let geometry = place.geometry;

      if ((geometry) !== undefined) {
        self.journeySearch.from.name = place.name;
        self.journeySearch.from.longitude = geometry.location.lng();
        self.journeySearch.from.latitude = geometry.location.lat();
      } else {
        self.journeySearch.from = {name:"",latitude:0,longitude:0};
      }

    });

  }

This all works absolutely fine when testing in the browser AND on an iOS device i.e when I start typing in the field it pops up the list of location suggestions just like it should.

However, on an Android device I get a white screen on start-up and an error message saying “google is not defined”. I checked out the Ionic Conference app because that uses Google Maps and I noticed that in their map component they have their stuff inside onPageLoad. So I moved my code out of ngOnInit and into onPageLoad and tried that. This time the error didn’t appear BUT the autocomplete won’t work i.e when I type in the field no drop-down with locations appears.

So I obviously need to add the listener in ngOnInit. But on an Android device this fails. Any ideas anyone?

My error log from when I run on the device is shown below:

http://maps.googleapis.com/maps/api/js?key=AIzaSyAwCLrM5H4UGVqWjgeDeWdz4TqgefrXlVQ&libraries=places Failed to load resource: net::ERR_CACHE_MISS
app.bundle.js:25033 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
app.bundle.js:34029 EXCEPTION: Error: Uncaught (in promise): ReferenceError: google is not defined
app.bundle.js:34020 EXCEPTION: Error: Uncaught (in promise): ReferenceError: google is not definedBrowserDomAdapter.logError @ app.bundle.js:34020
app.bundle.js:34020 STACKTRACE:BrowserDomAdapter.logError @ app.bundle.js:34020
app.bundle.js:34020 Error: Uncaught (in promise): ReferenceError: google is not defined
    at resolvePromise (zone.js:538)
    at zone.js:574
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (app.bundle.js:30819)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at drainMicroTaskQueue (zone.js:474)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:426)BrowserDomAdapter.logError @ app.bundle.js:34020
zone.js:461 Unhandled Promise rejection: google is not defined ; Zone: angular ; Task: Promise.then ; Value: ReferenceError: google is not defined(…)consoleError @ zone.js:461
zone.js:463 Error: Uncaught (in promise): ReferenceError: google is not defined(…)consoleError @ zone.js:463
app.bundle.js:67777 DEVICE READY FIRED AFTER 2015 ms

As I said, this error goes away when I place my code in onPageLoad (but then the listeners don’t actually work)

(this is all in Ionic 2 beta.7 by the way - i.e the latest and greatest)

Thanks!

1 Like
2

Oh I’m such a doughnut. It was simply a case of moving the google APIs inclusion up a bit in my index.html. Obviously on iOS it was loading in time but not on Android. Idiot.

1 Like
3

@richardshergold hello, can you help to start with google place api with ionic 2?