ブートストラップモードでGoogleマップを正しく表示する方法角度4

Question

私は角度4とAGM https://angular-maps.com/を使って作業しています。地図を表示したいのですが、画像を表示したいのですが、それは完全に表示されますが、これは正しい作業方法でしょうか？

これはマップを示す：

HTMLコード：

<a class="btn btn-warning btn-flat" href="#modalMap" data-toggle="modal"><i class="fa fa-lg fa-map"></i></a> 

<!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">{{title}}</h4> 
     </div> 
     <div class="modal-body"> 

       <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> 
        <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> 
       </agm-map> 


     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

</div> 

私のコンポーネント：

import { Component, OnInit } from '@angular/core'; 
    import { AngularFireDatabase, FirebaseListObservable } from  'angularfire2/database'; 

@Component({ 
selector: 'ap-map', 
templateUrl: './map.component.html', 
styleUrls: ['./map.component.css'] 
}) 
export class MapComponent implements OnInit { 
title: string = 'My first AGM project'; 
lat: number = 51.678418; 
lng: number = 7.809007; 
zoom: number= 15; 

ngOnInit() {} 
} 

CSS：

agm-map { 
height: 300px; 
width: 100%; 
} 

Answer 1

は、私は同じ問題を取得します。 Githubので@AGMプロジェクトのソリューションを探した後、私はこれを見つけたし、私の仕事：

こんにちは、インポートは、あなたの中に、以下の

は

import { AgmMap } from '@agm/core'; 

は、その後、あなたの建設が入る前にcomponent.ts ViewChildは以下のようになります。

@ViewChild(AgmMap) 
public agmMap: AgmMap 

そして、あなたはあなたのセクションでは、その後のようにサイズ変更・トリガーと呼ばれる表示されます。

this.agmMap.triggerResize(); 

出典：https://github.com/SebastianM/angular-google-maps/issues/1101

Answer 2

は私がtriggerResizeソリューションを使用しますが、それはので、私はちょうど体にマップを入れて、それが見えないその後、モーダルにそれを追加します私のために動作しませんでしたし、見えるようにする。