Google MapsがAngular ngAfterViewInitで初期化されていない

Question

Googleマップを複数のコンポーネントにまとめて設定して、同じページにすべて表示するようにしました。すべてのユニークな動的IDを与える必要がありました。中の初期化ngAfterViewInit()私は信じています。だから私はそれをしましたが、私の地図は表示されません。ここでは、私のコンポーネントで

...私が持っているものだ：

は

ngAfterViewInit(){ 
    this.randId = this.randomIdGenerator(); <-- Generates an ID for the elements 
    this.mapId = 'map-'+this.randId; 
    this.pacId = 'pac-input-'+this.randId; 
    this.map = new google.maps.Map(document.getElementById(this.mapId), this.mapConfig); 
    this.input = <HTMLInputElement>document.getElementById(this.pacId); 
    this.map.set("mapTypeId", 'roadmap'); 
    this.searchBox = new google.maps.places.SearchBox(this.input); 
    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.input); 
    this.searchBox.addListener('places_changed',() => { 
     this.placesChanged(this.searchBox.getPlaces()[0]); 
    }); 
    } 

テンプレート：

<md-card> 
    <input 
     style="color:black" 
     id="{{pacId}}" 
     name='address' 
     class="mapControls" 
     type="text" 
     value="" 
     placeholder="Enter Address"> 
    <div id="{{mapId}}"></div> 
</md-card> 

のは、要素に割り当てられているIDが、しかしマップは、単に表示されません。私はどちらかのエラーを取得していないよ...それはコードが要素を見つけることです。だからそれは良いです。しかし、それが見つかった後、マップは開かない。

Answer 1

だから、これはそれを修正：

<div style="width:300px; height:300px" [id]="mapId"></div> 

私たちはそれにマップを追加したときのdivが最初0PXサイズで作成され、成長していないされていたと思います。