Búsqueda de sitios web

javascript - IONIC 3: No se puede leer la propiedad 'nativeElement' de undefined TypeError: No se puede leer la propiedad 'nativeElement' de undefined

Estoy estudiando IONIC 3, y ahora estoy desarrollando una aplicación usando la API de Google Maps. El problema es que estoy intentando ejecutar mi aplicación, pero cuando se lanza, aparece este mensaje:

inicio.html

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

Este es el fragmento de código que está generando el problema:

inicio.ts (Solo una parte del código)

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 (Código completo)

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.com/docs/components/#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.com/docs/components/#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%;
    }
}

}

¡Gracias por tu ayuda!

Respuesta #1

En tu HTML necesitas cambiar

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

a

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

Entonces @ViewChild('map') mapElement: ElementRef; se resolverá correctamente.

Consulta esto para más detalles.

Respuesta #2

Esto llega tarde, pero para aquellos que todavía tienen el error después de seguir el tutorial de Josh desde aquí. Resolví mi error simplemente colocando la llamada a la función loadMap() en ionViewDidLoad() en lugar de en el constructor()

Artículos relacionados