Ionic Native Google Maps not showing

@pedritobnk90 wrote:

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.

Posts: 1

Participants: 1

Read full topic