I am studying IONIC 3, and now I am developing an app usig Google Maps API. The issue is that I am trying to execute my app, but when it's launched, there is appearing this message:

inicio.html

Error: Uncaught (in promise): TypeError: Cannot read property 
'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined

This is the piece of code which is generating the problem:

inicio.ts (Just a part of the code)

loadMap(){

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

  let latLng = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map(this.mapElement.nativeElement, 
  mapOptions);

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

}

inicio.ts (Full code)

import { Component,ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

declare var google: any;

/**
* Generated class for the InicioPage page.
*
* See  for more 
info on
* Ionic pages and navigation.
*/

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

@ViewChild('map') mapElement: ElementRef;
map: any; //Google map manager.
coords : any = { lat:0, lng: 0 } 

constructor(
public navCtrl: NavController, 
public navParams: NavParams,
public platform: Platform,
public geolocation: Geolocation) {

  platform.ready().then(() => {
      //Platform ready. All plugins enabled.
  });
}

ionViewDidLoad() {
console.log('ionViewDidLoad InicioPage');
this.loadMap();
}

loadMap(){

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

  let latLng = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

this.map = new google.maps.Map(this.mapElement.nativeElement, 
mapOptions);

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

}
}

inicio.html

<!--
Generated template for the InicioPage page.

See  for more 
info on
Ionic pages and navigation.
-->
<ion-header>

<ion-navbar>
<ion-title>Inicio</ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>
<!--<h1> Esta es la página de inicio, aquí situaremos un mapa con un 
boton de añadir lugar.</h1>-->
<div id="map"></div>

</ion-content>

inicio.scss

page-inicio {

ion-content{
    .scroll{
        height: 100%;   
    }
    #map{
        width: 100%;
        height: 100%;
    }
}

}

Thanks for your help!.

I am studying IONIC 3, and now I am developing an app usig Google Maps API. The issue is that I am trying to execute my app, but when it's launched, there is appearing this message:

inicio.html

Error: Uncaught (in promise): TypeError: Cannot read property 
'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined

This is the piece of code which is generating the problem:

inicio.ts (Just a part of the code)

loadMap(){

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

  let latLng = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map(this.mapElement.nativeElement, 
  mapOptions);

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

}

inicio.ts (Full code)

import { Component,ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

declare var google: any;

/**
* Generated class for the InicioPage page.
*
* See https://ionicframework./docs/ponents/#navigation for more 
info on
* Ionic pages and navigation.
*/

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

@ViewChild('map') mapElement: ElementRef;
map: any; //Google map manager.
coords : any = { lat:0, lng: 0 } 

constructor(
public navCtrl: NavController, 
public navParams: NavParams,
public platform: Platform,
public geolocation: Geolocation) {

  platform.ready().then(() => {
      //Platform ready. All plugins enabled.
  });
}

ionViewDidLoad() {
console.log('ionViewDidLoad InicioPage');
this.loadMap();
}

loadMap(){

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

  let latLng = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

this.map = new google.maps.Map(this.mapElement.nativeElement, 
mapOptions);

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

}
}

inicio.html

<!--
Generated template for the InicioPage page.

See http://ionicframework./docs/ponents/#navigation for more 
info on
Ionic pages and navigation.
-->
<ion-header>

<ion-navbar>
<ion-title>Inicio</ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>
<!--<h1> Esta es la página de inicio, aquí situaremos un mapa con un 
boton de añadir lugar.</h1>-->
<div id="map"></div>

</ion-content>

inicio.scss

page-inicio {

ion-content{
    .scroll{
        height: 100%;   
    }
    #map{
        width: 100%;
        height: 100%;
    }
}

}

Thanks for your help!.

• javascript
• google-maps
• typescript
• geolocation
• ionic3

• 1 Sounds like a DI error, can you please add the class constructor to your question? Also, please add the declaration and initialization for the mapElement property. – Aluan Haddad Commented Sep 17, 2017 at 21:43
• 1 Done!. Full code added. – Daniel Jose Carrillo Herrera Commented Sep 17, 2017 at 21:52
• I thnk you need to move the code into something like ngAfterViewInit as the @ViewChild('map') may not yet be available in the ionViewDidLoad lifecycle hook. I don't remember which hook to use though. – Aluan Haddad Commented Sep 17, 2017 at 21:56
• I put inside of ngAfterViewInit the call to loadMap(). Still not working. :( – Daniel Jose Carrillo Herrera Commented Sep 17, 2017 at 22:12
• and your template contains a tag like <div #map>? – Aluan Haddad Commented Sep 17, 2017 at 22:51

2 Answers 2

In your HTML you need to change

<div id="map"></div>

to

<div #map id="map"></div>

Then @ViewChild('map') mapElement: ElementRef; will resolve correctly.

See this for more details.

This is late, but for those who still have the error after following the tutorial by Josh from here. I solved my error just by placing the loadMap() function call in ionViewDidLoad() instead of in the constructor()