Error in google API map with Ionic "Runtime Error Uncaught (in promise): TypeError: Can not read property 'firstChild' of null"

Question

Error in google API map with Ionic "Runtime Error Uncaught (in promise): TypeError: Can not read property 'firstChild' of null"

Navigation

#1 by (0 votes)

1

I'm doing starting an app with Ionic 3, and using google's API for geolocation. I followed tutorials and even then gave this error when I open the page that should appear the map " Runtime Error Uncaught (in promise): TypeError: Can not read property 'firstChild' of null "

I've searched in some places and find no solution, none works. I need help with these little maps.

Homepage HTML ...

 home.html  
 <ion-header>
  <ion-navbar>
    <ion-title>
      Teste 
    </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>

.ts from the home 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) {

//[ ..  outra parte do código   ..  ]

    this.geolocation.getCurrentPosition().then((resp) => {
      // resp.coords.latitude
      // resp.coords.longitude
      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) => {
      // data can be a set of coordinates, or an error (if an error occurred).
      // data.coords.latitude
      // data.coords.longitude
     });

  }

  openMap(){
    this.navCtrl.push(MapPage);
  }
}
//[ ..  outra parte do código   ..  ]
//}

Map page HTML:

<ion-header>

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

</ion-header>


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

  </div>
</ion-content>

.ts from the 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();

    }, (err) => {
      console.log(err);
    });
  }

}

And in index.html (only one part):

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

typescript angular google-maps-api-3 ionic3

asked by anonymous 17.09.2017 / 01:26

1 answer

How to use two checkboxes in a C # mvc view to choose the type of query? Use timestamp with or without timezone in postgresql?

score 0 · Answer 1

Ah, the map.module, ts is as follows. (The error seems to be around, but I do not know where)

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 {}