I’ve had great success with Native Google maps in Ionic 3 except for one issue (of course it’s a blocker). I am able to add a polyline and marker to my map, but the promise never returns the handle for these objects. Instead I get these errors:
Unhandled Promise rejection: Cannot set property ‘polyline_695608509981’ of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot set property ‘polyline_695608509981’ of undefined
at Map. (vendor.js:82267)
at Map. (Map.js:1206)
at commandQueueExecutor.js:63
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3) TypeError: Cannot set property ‘polyline_695608509981’ of undefined
at Map. (file:///android_asset/www/build/vendor.js:82267:57)
at Map. (file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Map.js:1206:16)
at file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/commandQueueExecutor.js:63:21
at t.invoke (file:///android_asset/www/build/polyfills.js:3:14976)
at r.run (file:///android_asset/www/build/polyfills.js:3:10143)
at file:///android_asset/www/build/polyfills.js:3:20242
at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)
at r.runTask (file:///android_asset/www/build/polyfills.js:3:10834)
at o (file:///android_asset/www/build/polyfills.js:3:7894)
n.onUnhandledError @ polyfills.js:3
r @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3
Promise.then (async)
r @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMicroTask @ polyfills.js:3
f @ polyfills.js:3
c @ polyfills.js:3
(anonymous) @ polyfills.js:3
Promise.then (async)
(anonymous) @ polyfills.js:3
t @ polyfills.js:3
t.then @ polyfills.js:3
nextTick @ Common.js:6
commandQueue.push.args @ commandQueueExecutor.js:62
callbackFromNative @ cordova.js:291
(anonymous) @ VM815:1
polyfills.js:3 Unhandled Promise rejection: Cannot set property ‘marker_1292454192683’ of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot set property ‘marker_1292454192683’ of undefined
at Map. (vendor.js:82081)
at Map. (Map.js:1293)
at commandQueueExecutor.js:63
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3) TypeError: Cannot set property ‘marker_1292454192683’ of undefined
at Map. (file:///android_asset/www/build/vendor.js:82081:57)
at Map. (file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Map.js:1293:16)
at file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/commandQueueExecutor.js:63:21
at t.invoke (file:///android_asset/www/build/polyfills.js:3:14976)
at r.run (file:///android_asset/www/build/polyfills.js:3:10143)
at file:///android_asset/www/build/polyfills.js:3:20242
at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)
at r.runTask (file:///android_asset/www/build/polyfills.js:3:10834)
at o (file:///android_asset/www/build/polyfills.js:3:7894)
My first thought is that I’m using the map at the wrong point in the Ionic lifecycle. I am calling the following function from ionViewDidLoad() which I believe is the correct approach. The function is shown below:
loadMap() {
let options: PolylineOptions = {
points: this.coords,
color: '#AA00FF',
width: 10,
geodesic: true,
zoom: true,
strokeOpacity: 1.0
};
const VICTORIA_BC = {"lat": 48.4238642, "lng": -123.36846639};
this.map = new GoogleMap('map_canvas', {
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
},
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true,
'zoom': true
},
'camera': {
target: VICTORIA_BC,
zoom: 18,
tilt: 30
}
});
let marker = this.map.addMarker({
title: 'TItle',
icon: 'blue',
animation: 'DROP',
position: {
lat: 48.4238642,
lng: -123.36846639
}
})
.then((marker) => {
marker.showInfoWindow();
})
.catch((e) => {
console.log(e);
});
this.map.addPolyline(options)
.then((result) => {
console.log("Added polyline" + JSON.stringify(result));
this.line = result;
})
.catch((e) => {
console.log(e);
});
}
Any help is appreciated.
Stuart