Ionic Native Google Maps not showing

Ionic Native
1

I’m having problems with Ionic cordova Google Maps native, I had the map with Google Maps Javascript Api and I’m migrating it. The problem is the map isn’t showing, the screen is blank. I have tried including the code in OnInit showing in console “runtime error cannot read property environment of null”:


Ionic:

   Ionic CLI                     : 6.7.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.900.5
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 9.0.5
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, browser 6.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)

Utility:

   cordova-res (update available: 0.14.0) : 0.11.0
   native-run (update available: 1.0.0)   : 0.2.8

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.14.1 (/usr/local/bin/node)
   npm        : 6.14.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.4 Build version 11E146

MapComponent.ts

import { Component, OnInit, Input, NgZone, Inject, ViewChild, ElementRef } from '@angular/core';
import { Platform } from '@ionic/angular';
// tslint:disable-next-line: max-line-length
import { GoogleMaps, GoogleMap, GoogleMapOptions, Environment, Circle, ILatLng } from '@ionic-native/google-maps';

@Component({
  selector: 'app-map-component',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent {

  @Input() lat: string;
  @Input() lng: string;
  @Input() radiusCircle: number;
  @Input() namePlace: string;
  @Input() placeId: string;
  @ViewChild('map', {static: true}) mapElement: ElementRef;
  // tslint:disable-next-line: new-parens
  map: GoogleMap;

  constructor(private platform: Platform ) { }


  async ionViewDidLoad() {

    await this.platform.ready().then(() => {
      this.loadMap();
    }).catch( err => {
      console.log('Error de platform.ready', err);
    });
  }

  loadMap() {

    Environment.setEnv({
      API_KEY_FOR_BROWSER_DEBUG: '......',
      API_KEY_FOR_BROWSER_RELEASE: '......'
    });
    const lat = Number(this.lat);
    const lng = Number(this.lng);

    const mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat,
          lng
        },
        zoom: 9,
        tilt: 30
      }
    };
    this.map = GoogleMaps.create('map_canvas', mapOptions);

}

map.component.html

<div style="height: 100%;width: 100%" id="map_canvas"></div>

Thanks and I’m sorry for my English.

UPDATE added config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.madrigal.escondite" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Escondite</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content original-src="index.html" src="http://localhost:8100" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="my_api_key" />
    <preference name="GOOGLE_MAPS_IOS_API_KEY" value="my_api_key" />
    <platform name="android"> // ALL config of platform android </platform>
    <platform name="ios"> // ALL config of platform ios </platform>
    <platform name="windows"> // ALL config of platform windows </platform>
     ....
</widget>

Should it be present the platform OSx? I’m running in google chrome on macbook.