Error in map of google API with Ionic “Runtime Error Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null”

Ionic Framework ionic-v3
1

I’m making an app with Ionic 3, and I use a google API for geolocation. I followed tutorials and still this error continues when I open a page that should appear the map.

“Runtime error Uncaught (on promise): TypeError: Unable to read the ‘firstChild’ of null property”

I have read in some places and I do not find a solution, it does not work. Needing help with these maps. (Sorry for my bad English)

Initial page HTML…

home.html

 <ion-navbar>
   <ion-title>
     Test 
   </ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-list>
   <ion-item>
    Latitude: {{lat}}
   </ion-item>
   <ion-item>
       Longitude: {{lon}}
      </ion-item>
 </ion-list>
 <button (click)="openMap()">Mapa</button>

 </ion-content>

home.ts (initial page):

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { MapPage } from '../map/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  lat:any=0.0;
  lon:any=0.0;

  constructor(public navCtrl: NavController, public geolocation: Geolocation) {

//[ ..  other code  ..  ]

    this.geolocation.getCurrentPosition().then((resp) => {

      this.lat = resp.coords.latitude;
      this.lon = resp.coords.longitude;
         }).catch((error) => {
       console.log('Error getting location', error);
     });

     let watch = this.geolocation.watchPosition();
     watch.subscribe((data) => {
     });

  }

  openMap(){
    this.navCtrl.push(MapPage);
  }
}
//[ ..  other code  ..  ]
//}

map.html (map page):

<ion-header>

  <ion-navbar>
    <ion-title>map</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div id="mapa">

  </div>
</ion-content>

map.ts (map page):

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import '../map/map';
import { Geolocation } from '@ionic-native/geolocation';
declare var google: any;

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

  private initPage(){
    let LatLng = new google.maps.LatLng(-22.913293, -43.688930);
    let mapOptions =  {
      center: LatLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true
    }

    let elemento = document.getElementById('mapa');

    let mapa = new google.maps.Map(elemento, mapOptions);

  }
  //ionViewDidLoad() {
   // console.log('ionViewDidLoad MapPage');
  //}


  constructor(public navCtrl: NavController, public navParams: NavParams, platform: Platform) {
    platform.ready().then(() =>{
    this.initPage();
    });
  }

}

map.module.ts (map page)

import { ViewChild, ErrorHandler, NgModule } from '@angular/core';
import { IonicPageModule, IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MapPage } from '../map/map';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MapPage,
  ],
  imports: [
    //I think the error is here
    IonicPageModule.forChild(MapPage),
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Geolocation
  ]
})
export class MapPageModule {}

And references to google API in index.html :

 <script src="https://maps.googleapis.com/maps/api/js?key=mynumberkeyishere"
  async defer></script>
2

I’m not seeing firstChild anywhere in what you posted, so the error must be elsewhere.

3

Tnks for the help. I had not really seen my writing error in the code.
I wrote “for” instead “first”.
But the error remains. :slightly_frowning_face:

4

Edit: i wrote all the code again, of beginning. The error now happen when i drag the page of map, is: cannot read property ‘x’ of undefined.