Ionic-native-google-maps: TypeError: Cannot read property 'BaseClass' of null

[Newbie012]

I'm submitting a ... (check one with "x")

• [ ] question
• [X] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ ] Android
• [ ] iOS
• [x] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.5.0-beta-20181016-1830 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.2.0 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.4.1 "SocialSharing"
es6-promise-plugin 4.2.2 "Promise"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "5.0.0-beta.21",
"@ionic-native/google-maps": "^5.0.0-beta.23",

Current behavior:
On initializing loadMap() (given from the git example) triggers the following error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'BaseClass' of null

Expected behavior:
Should present the map without triggering any errors.

Screen capture or video record:

Related code, data or error log (please format your code or data):

import { Component, OnInit } from '@angular/core';
import {
  ToastController,
  Platform,
  LoadingController
} from '@ionic/angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  Marker,
  GoogleMapsAnimation,
  MyLocation,
} from '@ionic-native/google-maps';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  map: GoogleMap;
  loading: any;

  constructor(
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController,
    private platform: Platform) { }

  async ngOnInit() {
    await this.platform.ready();
    console.log('Triggered');
    await this.loadMap();
    console.log('Not Triggered');

  }

  async loadMap() {
    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: {
          lat: 43.0741704,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    });

  }

  async onButtonClick() {
    this.map.clear();

    this.loading = await this.loadingCtrl.create();
    await this.loading.present();

    // Get the location of you
    this.map.getMyLocation().then((location: MyLocation) => {
      this.loading.dismiss();
      console.log(JSON.stringify(location, null ,2));

      // Move the map camera to the location with animation
      this.map.animateCamera({
        target: location.latLng,
        zoom: 17,
        tilt: 30
      });

      // add a marker
      let marker: Marker = this.map.addMarkerSync({
        title: '@ionic-native/google-maps plugin!',
        snippet: 'This plugin is awesome!',
        position: location.latLng,
        animation: GoogleMapsAnimation.BOUNCE
      });

      // show the infoWindow
      marker.showInfoWindow();

      // If clicked it, display the alert
      marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        this.showToast('clicked!');
      });
    })
      .catch(err => {
        this.loading.dismiss();
        this.showToast(err.error_message);
      });
  }

  async showToast(message: string) {
    let toast = await this.toastCtrl.create({
      message: message,
      duration: 2000,
      position: 'middle'
    });

    toast.present();
  }
}

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <a class="sourcecode" href="https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4/blob/master/src/app/home/home.page.ts" target="_blank">[source code]</a>
  <h3>Ionic GoogleMaps Demo</h3>
  <p>
    The <a href="https://github.com/ionic-team/ionic-native-google-maps">@ionic-native/google-maps</a> plugin and the <a href="https://github.com/mapsplugin/cordova-plugin-googlemaps" target="_blank">cordova-plugin-googlemaps</a> are able to display Google Maps in your Cordova application.
    One source code, then run it browser, Android and iOS!
  </p>
  <div id="map_canvas">
    <ion-button ion-button (click)="onButtonClick()">Demo</ion-button>
  </div>
</ion-content>

PS - For angular, shouldn't we import {...} from '@ionic-native/google-maps/ngx'? because importing from /ngx will trigger an error.

[wf9a5m75]

Please share your project files on GitHub. Not pasting code.

[Newbie012]

If you don't mind, I've shared the project with you privately.

[Newbie012]

I think it has something to do with using @ionic/angular-toolkit over @ionic/ng-toolkit.

[wf9a5m75]

Will be fixed soon.

[wf9a5m75]

One reason of this error is you use ionic cordova browser -l.
It seems the latest ionic v4 does not load cordova.js when you run your app with -l (live-reload).

Here is the capture from your photo above.

[Newbie012]

As you said, running without live-reload will somehow resolve this error, but it still looks like there's something wrong with the integration with Cordova:

PS - I'm getting this warning even when I placed my API keys for Android + IOS in both config.xml and package.json:

util.js:225 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Should I add API_KEY_FOR_BROWSER? or it's probably happening because of the rest of the errors.

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps#api-key

[wf9a5m75]

Use

import {GoogleMap, ..., MyLocation,} from '@ionic-native/google-maps/ngx';

instead of

import {GoogleMap, ..., MyLocation,} from '@ionic-native/google-maps`;

on ionic 4.2.1

Then $> ionic cordova run browser.

[MattL-NZ]

I'm having a similar issue but mine is referring to the Environment variables.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'environment' of null
TypeError: Cannot read property 'environment' of null
    at Function.push../node_modules/@ionic-native/google-maps/index.js.Environment.setEnv (index.js:543)
    at home.page.ts:90
    at new ZoneAwarePromise (zone.js:891)
    at HomePage.push../src/app/home/home.page.ts.HomePage.loadMap (home.page.ts:88)
    at HomePage.<anonymous> (home.page.ts:60)
    at step (home-home-module.js:2052)
    at Object.next (home-home-module.js:2033)
    at fulfilled (home-home-module.js:2024)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3820)
    at Function.push../node_modules/@ionic-native/google-maps/index.js.Environment.setEnv (index.js:543)
    at home.page.ts:90
    at new ZoneAwarePromise (zone.js:891)
    at HomePage.push../src/app/home/home.page.ts.HomePage.loadMap (home.page.ts:88)
    at HomePage.<anonymous> (home.page.ts:60)
    at step (home-home-module.js:2052)
    at Object.next (home-home-module.js:2033)
    at fulfilled (home-home-module.js:2024)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3820)
    at resolvePromise (zone.js:814)
    at zone.js:724
    at rejected (home-home-module.js:2025)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3820)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)`

We are using Capacitor (not sure if that matters as we are still using the cordova plugin.) Is there any way to fix this?

async ionViewDidEnter() {
        console.log("didEnter");
        this.resetAutoCompleteToken();

        await this.platform.ready();
        this.placesService = new google.maps.places.PlacesService(<HTMLDivElement>document.getElementById("places-attribs"));

        const [position] = await this.withLoading(Promise.all([
            this.getGeolocation(),
            this.loadMap()
        ]));

        //TODO: make geocodeAndMarkPosition a continuation of the above task so that an additional withloading is not required:
        if (!!position) await this.withLoading(this.geocodeAndMarkPosition(position, "Your current location"));

        this.searchField.value = '';
        setTimeout(() => this.searchField.setFocus(), 100); //unfortunately somewhat arbitrary and may not always work.
    }

loadMap() {
        return new Promise((res, rej) => {
            debugger;
            Environment.setEnv({
                API_KEY_FOR_BROWSER_DEBUG: environment.apiKeys.googleMaps.browserDebug
            });

[wf9a5m75]

cordova-plugin-googlemaps does not support Capacitor.

[Newbie012]

If I add /ngx, then I get the following error:

ERROR in src/app/home/home.page.ts(30,27): error TS2339: Property 'create' does not exist on type 'typeof GoogleMaps'.

It refers to the following code:

  async loadMap() {
    this.map = GoogleMaps.create('map_canvas', { // <-------------------
      camera: {
        target: {
          lat: 43.0741704,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    });

  }

WebStorm says:

Still using:

"@ionic-native/core": "5.0.0-beta.21",
"@ionic-native/google-maps": "^5.0.0-beta.23",

[wf9a5m75]

@Newbie012 Please reinstall @ionic-native/[email protected]

[Newbie012]

ionic s Works without any errors
ionic cordova run browser Works like a charm.
ionic cordova run browser -l Triggers:

> ng run app:ionic-cordova-serve --host=0.0.0.0 --port=8101 --platform=browser

[ERROR] ng has unexpectedly closed (exit code 0).

        The Ionic CLI will exit. Please check any output above for error details.

[wf9a5m75]

That's not this plugin's problem. Please ask to ionic team.