Undetected error: 'nativeElement' property cannot be read

Question

I’m implementing an Uber app clone interface and trying to render a map through Google’s API, but when executing the code the map does not load and the console shows the following error:

core.js:6210 ERROR Error: Uncaught (in Promise): Typeerror: Cannot read Property 'nativeElement' of Undefined Typeerror: Cannot read Property 'nativeElement' of Undefined, if anyone can help please.

Detail for Oninit that is imported but it appears as if it was not being used, I tried to find something about its import but I did not find anything related.

home page TS

import { Component, OnInit, ViewChild } from '@angular/core';

import { Environment, GoogleMap, GoogleMaps } from '@ionic-native/google-maps';
import { LoadingController, Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('map') mapElement: any;
  private loading: any;
  private map: GoogleMap;

  constructor(
    private platform: Platform,
    private loadingCtrl: LoadingController,

  ) { }

  ngOnInit() {
    this.mapElement = this.mapElement.nativeElement;

    this.mapElement.style.width = this.platform.width() + 'px';
    this.mapElement.style.height = this.platform.height() + 'px';

    this.loadMap();
  }

  async loadMap() {
    this.loading = await this.loadingCtrl.create({ message: 'Por favor, aguarde...' });
    await this.loading.present();

    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'AIzaSyAAogVAZBAiK6dS3oSp9wgeuoH6M-ffxZg',
      'API_KEY_FOR_BROWSER_DEBUG': 'AIzaSyAAogVAZBAiK6dS3oSp9wgeuoH6M-ffxZg'
    });

    this.map = GoogleMaps.create(this.mapElement);
  }
}

Answer 1

In the ngOnInit html has not yet been redenrized. Try adding this code to ngAfterViewInit.