角度2コンポーネントでGoogleマップを読み込めないのはなぜですか？

Question

は、ここに私のTSコンポーネントです：

import {Component, OnInit, Output, EventEmitter} from '@angular/core'; 

    declare var google: any; 

    @Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'], 
    }) 


    export class AppComponent implements OnInit { 
     title = 'Dashboard'; 
     private map: any; 


     constructor() { 
      let brussels = new google.maps.LatLng(50.82, 4.35); 
      var mapOptions = { 
      zoom: 9, 
      center: brussels 
      }; 
      this.map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 

      var marker = new google.maps.Marker({ 
      position: brussels 
      }); 
      //google.maps.event.addListener(marker, 'click', (() => this.select.next("i was a map click"))) 
      marker.setMap(this.map); 

     } 

     ngOnInit(){ 

     } 

はここに私のhtmlです：

<h1> 
    {{title}} 
</h1> 
<div id="googleMap"></div> 
<div id="legend-container"><h3>Legend</h3></div> 
<div id="info-box" style="">?</div> 

が、私はGoogleマップのAPIキーindex.htmlをメインに宣言しました。問題は、Googleマップをコンポーネントに読み込むことができないことです。コンソール内のエラーは、主に以下がある：

error_handler.js:45 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: google is not definedErrorHandler.handleError @ error_handler.js:45(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357 
error_handler.js:47 ORIGINAL EXCEPTION: google is not definedErrorHandler.handleError @ error_handler.js:47(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357 
error_handler.js:50 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357 
error_handler.js:51 ReferenceError: google is not defined 

任意の提案が高く評価される:)

Answer 1

GoogleマップAPIは、あなたはまだロードされていませんそれが非同期的にロードされ、ロードされた後にマップが初期化されます。 google mapsを非同期的に読み込むことに関してthis questionを見てください。

@GünterZöchbauerは、ビューが初期化された後にマップを初期化する必要があると述べています。 （ngAfterViewInitで）このような

何か：

export class AppComponent implements AfterViewInit { 
    title = 'Dashboard'; 
    private map: any; 

    constructor() { 
    } 
    onMapsReady(){ 
    let brussels = new google.maps.LatLng(50.82, 4.35); 
    var mapOptions = { 
     zoom: 9, 
     center: brussels 
    }; 
    this.map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 
    var marker = new google.maps.Marker({ 
     position: brussels 
    }); 
    //google.maps.event.addListener(marker, 'click', (() => this.select.next("i was a map click"))) 
    marker.setMap(this.map); 
    } 
    ngAfterViewInit(){ 
    (<any>window).googleMapsReady=this.onMapsReady.bind(this); 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(script); 
    script.src = "http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=googleMapsReady"; 

    } 

} 

NB：サービス経由でAPIをロードすることになります（多くの）優れたGoogleマップがまだロードされていない

Answer 2

googleMap要素はこの時点でDOMに存在しません。参照してください、詳細についてはお使いのindex.html

<script src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

からこれらの2つのファイルをロードしてみngAfterViewInit()

export class AppComponent implements OnInit { 
    title = 'Dashboard'; 
    private map: any; 


    ngAfterViewInit() { 
     let brussels = new google.maps.LatLng(50.82, 4.35); 
     var mapOptions = { 
     zoom: 9, 
     center: brussels 
     }; 
     this.map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 

     var marker = new google.maps.Marker({ 
     position: brussels 
     }); 
     //google.maps.event.addListener(marker, 'click', (() => this.select.next("i was a map click"))) 
     marker.setMap(this.map); 

    } 
} 

Answer 3

にコードを移動し、この - https://developers.google.com/chart/interactive/docs/basic_load_libsは