Erro no mapa da API google com Ionic "Runtime Error Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null"

[huhuhu 0]

Estou fazendo iniciando um app com Ionic 3,  e utilizando a API do google para geolocalização. Segui tutoriais e mesmo assim deu esse erro quando abro a página que deveria aparecer o mapa "

Runtime Error

Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null "

 

Já procurei em alguns lugares e não encontro solução, nenhuma funciona. To precisando de ajuda com esses mapinhas.

HTML da página inicial...

<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 da página inicial:

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	..	]
//}

HTML da página do mapa:

<ion-header>

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

</ion-header>


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

.ts da página do mapa:

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;
/**
 * Generated class for the MapPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@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);
    });
  }

}

 

E na index.html (só uma parte):

 <!--para o api do google maps ..................................................................  -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com;
  script-src 'self' https://*.googleapis.com 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';">
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
      <!-- google maps ..............................................................................  -->
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>

Talvez seja informação demais, mas, acho melhor que tenha mais do que menos.