2017-10-10 9 views
0

イオン2を使用していて、JS APIを使用してGoogleマップをロードしようとしています。ここ は私のコードです:Ionic 2 Google Maps ::未知(未定):TypeError:nullの 'firstChild'プロパティを読み取れません

import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { NavController, Platform, NavParams } from 'ionic-angular'; 
declare var google; 

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

    @ViewChild('map') mapElement: ElementRef; 
    map: any; 
    latitude : any; 
    longitude : any; 

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

    this.platform = platform;  
    this.initializeMap(); 
    } 

    ionViewDidLoad(){ 
    this.initializeMap(); 
    } 

    initializeMap() {  
     this.platform.ready().then(() => { 
     var minZoomLevel = 12; 

     this.map = new google.maps.Map(document.getElementById('map'), { 
      zoom: minZoomLevel, 
      center: new google.maps.LatLng(38.50, -90.50), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var position = new google.maps.LatLng("23.032612699999998", "72.56187790000001"); 
     var dogwalkMarker = new google.maps.Marker({position: position, title: "Testing"}); 
     dogwalkMarker.setMap(this.map); 
    }); 

    } 

} 

私もcordova.js前に私のindex.htmlファイルにJSの参照を追加しました:ここ

<script src="http://maps.google.com/maps/api/js"></script> 

は私のhtmlです:

<ion-header> 
    <ion-navbar hideBackButton side="left"> 
    <ion-title style="margin-left: 0px;"><span class="menuTitle">Map</span></ion-title>  
    </ion-navbar> 

</ion-header> 

<ion-content> 
    <div #map id="map"></div> 
</ion-content> 

コードにエラーは表示されませんが、このページをロードしようとすると、次のようなエラーが表示されます。

キャッチされない(約束で):TypeError例外:プロパティを読み取ることができません 'のfirstChild' ヌルの

答えて

1

使用mapElementそれが働いた

活字体ファイル

let minZoomLevel = 12; 
let mapOptions = { 
    zoom: minZoomLevel, 
    center: new google.maps.LatLng(38.50, -90.50), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions); 
+0

。ありがとう@hrdkisback – Aparna

+0

@Aparna、これは答えとしてマークすることができますので、他の人はこの投稿から助けを得ることができます。ありがとう。 – hrdkisback

関連する問題