Angular 5 - 谷歌地图在ng-bootstrap模态

Question

我正在尝试使用ng-bootstrap模式中的谷歌地图显示位置，但有些地图不可见。如果我把谷歌地图外的模态其可见。我已经从this url

读取了角度5和谷歌地图集成

如何实现在模态中显示谷歌地图的这种情况？

这是模板代码

<button (click)="ver(mymodal)"> <button>
<ng-template #mymodal let-c="close" let-d="dismiss">
    <div class="modal-header">
      <h4 class="modal-title">{{temptask.name}}</h4>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>One fine body&hellip;</p>
      <div #gmap style="width:100%;height:400px"></div>

    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
    </div>
  </ng-template>

组件代码：

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { } from '@types/googlemaps';
 @ViewChild('gmap') gmapElement: any;
  map: google.maps.Map;
ngOnInit() {

    var mapProp = {
      center: new google.maps.LatLng(18.5793, 73.8143),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
    this.map.fitBounds
}

ver( modal) {
    this.modalService.open(modal);

  }