Ionic native google maps: "__zone_symbol__currentTask" error


#1

very unclear error:

{ "__zone_symbol__currentTask": { "type": "microTask", "state": 
            "notScheduled", "source": "Promise.then", "zone": "angular", "cancelFn": null, "runCount": 0 } }

this happens when I enter a page, load a google map and try to getMyLocation. It was working before. code:

@IonicPage()
@Component({
  selector: 'page-from-order',
  templateUrl: 'from_order.html'
})
export class ClientFromOrderPage {

  map: GoogleMap;
  location: ClientOrder;

  constructor(private nav: NavController, private storage: StorageSRV,
              private googleMaps: GoogleMaps, private platform: Platform, private locSrv: LocationSRV) {
    this.location = new ClientOrder({from: new Address(), to: new Address()});
  }

  ionViewDidLoad() {
    this.platform.ready().then(() => {
      this.loadMap();
    })
  }

  ionViewDidLeave() {
    if (!this.map) return;

    this.map.remove()
      .catch(err => console.log(err));
  }

  loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = GoogleMaps.create('map');

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        return this.map.getMyLocation()
      })
      .then((location: MyLocation) => {
        // console.log(JSON.stringify(location, null ,2));
        return this.locSrv.geocodeLatLngToAddress(location.latLng);
      })
      .then((res: Address) => {
        return this.location.from = res;
      })
      .then(() => {
        // Move the map camera to the location with animation
        return this.map.animateCamera({
          target: this.location.from.latLng,
          zoom: 17,
          tilt: 30,
          duration: 10
        })
      })
      .then(() => {
        // add a marker
        return this.map.addMarker({
          title: '@ionic-native/google-maps plugin!',
          snippet: 'This plugin is awesome!',
          position: this.location.from.latLng,
          animation: GoogleMapsAnimation.BOUNCE
        });
      })
      .then(() => {
        this.map.addEventListener(GoogleMapsEvent.MAP_CLICK)
          .subscribe((coords: LatLng) => {
            console.log('touched');

            this.addMarker(coords)
              .then((m: Marker) => {
                console.log('adding the marker');
              })
              .catch(err => console.log(err));
          });
      })
      .catch(err => console.error('error getting from address: ', JSON.stringify(err, null ,2)))
  }

  destination() {
    this.nav.push('ClientToOrderPage', {
      location: this.location
    });
  }

  addMarker(coords: LatLng): Promise<Marker> {
    console.log('in method');

    return this.map.addMarker({
      title: 'Drive me here',
      icon: 'blue',
      animation: 'DROP',
      position: coords
    })
  }
}

package.json:

{
  "name": "GoogleMaps-quick-demo",
  "version": "0.0.1",
  "author": "Masashi Katsumata",
  "homepage": "https://github.com/mapsplugin",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@ionic-native/core": "^4.4.0",
    "@ionic-native/google-maps": "^4.4.0",
    "@ionic-native/native-geocoder": "^4.5.3",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/storage": "2.0.1",
    "cordova-android": "6.3.0",
    "cordova-ios": "^4.5.3",
    "cordova-plugin-add-swift-support": "^1.7.1",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-googlemaps": "^2.1.0",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-nativegeocoder": "^3.1.1",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.8.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.1",
    "typescript": "2.3.4"
  },
  "description": "A demo app of @ionic-native/google-maps plugin.",
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "a key",
        "API_KEY_FOR_IOS": "a key"
      },
      "cordova-plugin-statusbar": {},
      "cordova-plugin-nativegeocoder": {
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
      }
    },
    "platforms": [
      "android"
    ]
  }
}
 ionic -v
3.20.0

#2

Your Cordova tooling seems to be out of date, which might be causing all kinds of problems.
You can read about how to figure out the current Cordova versions and how to update CLI, platforms and plugins here: https://ionic.zone/cordova/update