Google maps polyline error


#1

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


#2

Looks like this error was caused by mixing code from different approaches to creating maps. I was using this.map = new GoogleMap('map_canvas', mapOptions). The issue was fixed by entering this.map = GoogleMaps.create('map_canvas', mapOptions).


#3

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000