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!