[ignore]CordovaGoogleMaps.removeMap, because it's not ready

Ionic Framework ionic-v3
1

even through, I’m not removing google maps at all I get [ignore]CordovaGoogleMaps.removeMap, because it's not ready.

page:

@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();
    })
  }


  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": "AIzaSyB8gNoVltCFAjXQ3EGU1KID-DDsKJYgibA",
        "API_KEY_FOR_IOS": "AIzaSyB8gNoVltCFAjXQ3EGU1KID-DDsKJYgibA"
      },
      "cordova-plugin-statusbar": {},
      "cordova-plugin-nativegeocoder": {
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

$ ionic -v
3.20.0

Thanks for suggestions!

1 Like