@ionic-native/google-maps – Environment is null running under browser platform

I’m currently developing an Ionic v5 app using base Ngrx-rocket template and running against Firebase v7 and I’m currently facing issues running Google Maps for platform browser (my idea is to develop all the required points there and then running it on an android app).

I’ve read all the documentation found on the internet and follow similar issues found on StackOverflow, but I’m still stuck finding a solution. These are the steps that I followed so far:

  1. I created a Google Maps API Key restricted by URL (localhost:8000) & API (Map’s Javascript API)
  2. I’ve added @ionic-native/google-maps plugin (5.5.0) & cordova-plugin-googlemaps (2.7.1)
  3. I’ve setup the following component in a register page inside an ion-slide after registering a user in firebase:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { GoogleMaps, GoogleMap, GoogleMapsEvent,
         Marker, GoogleMapsAnimation, MyLocation,
         Environment } from '@ionic-native/google-maps';

import { Platform, ToastController } from '@ionic/angular';

import { BaseViewComponent } from '@app/@core/views/base.view.component';

@Component({
  selector: 'nv-register-user-property',
  templateUrl: './register-user-property.component.html',
  styleUrls: ['./register-user-property.component.scss'],
})
export class RegisterUserPropertyComponent extends BaseViewComponent
                                           implements OnInit {
  map: GoogleMap;
  address: string;

  constructor(_router: Router, _platform: Platform, private toastCtrl: ToastController) {
    super(_router, _platform);
  }

  async ngOnInit() {
    await this.platform.ready();
    Environment.setEnv({
      // api key for server
      API_KEY_FOR_BROWSER_RELEASE: MY GOOGLE MAPS API KEY,
      // api key for local development
      API_KEY_FOR_BROWSER_DEBUG: MY GOOGLE MAPS API KEY,
    });
    await this.loadMap();
  }

  loadMap(): void {

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

  goToMyLocation() {
    this.map.clear();

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

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

        // add a marker
        const marker: Marker = this.map.addMarkerSync({
          title: 'Example marker',
          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!');
        });

        this.map.on(GoogleMapsEvent.MAP_READY).subscribe((data) => {
          console.log('Click MAP', data);
        });
      })
      .catch((err) => {
        // this.loading.dismiss();
        this.showToast(err.error_message);
      });
  }

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

CSS:

#map_canvas {
  width: 100%;
  height: 80vh;
}

HTML:

<ion-grid class="ion-no-padding">
  <ion-row class="ion-justify-content-center ion-no-padding">
    <ion-col size-sm="8" size-lg="6" size-xl="4" class="ion-align-self-center ion-no-padding">
      <div class="nv-view-container">
        <div id="map_canvas"></div>
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
  1. The component that contains the previous component has the following template
<ion-header *ngIf="hasRouteBack">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content fullscreen scroll-y="false">
  <div class="nv-view-header ion-padding">
    <h1>Register</h1>
  </div>
  <ion-slides [options]="{ allowTouchMove: false}">
    <!-- REGISTRATION PHASE I - REGISTER USER IN FIREBASE -->
    <ion-slide>
      <nv-register-firebase-user (registeredUserOnFirebase)="navigateToRegisterProperty($event)"> </nv-register-firebase-user>
    </ion-slide>
    <!-- REGISTRATION PHASE II - REGISTER USER'S PROPERTY -->
    <ion-slide>
      <nv-register-user-property></nv-register-user-property>
    </ion-slide>
    <!-- WAIT FOR AN EMAIL IN ORDER TO ACCESS AGAIN -->
    <ion-slide> </ion-slide>
  </ion-slides>
</ion-content>
  1. I’ve built Cordova platform browser (ionic cordova build browser -l) –> Built went OK
  2. I’ve run Cordova browser (ionic cordova run "browser") –> I’m able to navigate till Register page, Phase I slide appears fine but there is an error in the console log that I belive it’s related to Phase II when running Environment.setEnv:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'environment' of null
TypeError: Cannot read property 'environment' of null
    at Function.t.setEnv (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at t.<anonymous> (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at Generator.next (<anonymous>)
    at s (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at l.invoke (polyfills-es2015.a297156131f0162b89cd.js:1)
    at Object.onInvoke (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at l.invoke (polyfills-es2015.a297156131f0162b89cd.js:1)
    at i.run (polyfills-es2015.a297156131f0162b89cd.js:1)
    at polyfills-es2015.a297156131f0162b89cd.js:1
    at l.invokeTask (polyfills-es2015.a297156131f0162b89cd.js:1)
    at T (polyfills-es2015.a297156131f0162b89cd.js:1)
    at polyfills-es2015.a297156131f0162b89cd.js:1
    at s (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at l.invoke (polyfills-es2015.a297156131f0162b89cd.js:1)
    at Object.onInvoke (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at l.invoke (polyfills-es2015.a297156131f0162b89cd.js:1)
    at i.run (polyfills-es2015.a297156131f0162b89cd.js:1)
    at polyfills-es2015.a297156131f0162b89cd.js:1
    at l.invokeTask (polyfills-es2015.a297156131f0162b89cd.js:1)
    at Object.onInvokeTask (main-es2015.12d25dc45bb2cb26c0b5.js:1)

And I’m also obtaining the following console warning message

Native: tried accessing the GoogleMaps plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

So what am I missing here? Is there anyway to debug platform browser? (it looks like that it’s running under release code)

Source: New feed
Source Url @ionic-native/google-maps – Environment is null running under browser platform