模态中的嵌入式Google地图显示为空白，直到窗口手动调整大小

Question

我有一个嵌入到模态中的谷歌地图，但是当点击打开模态时，地图显示为空白。

谷歌搜索后，我以为我找到了一个使用jquery再次调整窗口大小的解决方案，但它似乎无法正常工作。

目前的代码我使用：

component.html：

  <div class="col s12 m6">
    <a href="#" onclick="$('#map-modal').modal('open');">
      <div class="card">
        <div class="card-image">
          <img src="./assets/1.jpg" class="z-depth-4">
          <span id="card-title" class="card-title">Map's and Directions</span>
        </div>
      </div>
    </a>
  </div>

    <div id="map">
      <script type="text/javascript">
          google.maps.event.trigger(map, 'resize');
      </script>
    </div>

component.css

#map {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

component.ts

    export class AppComponent implements OnInit {
  title = 'app';

  modalActions = new EventEmitter<string|MaterializeAction>();

  ngOnInit() {
    var mapProp = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    var map = new google.maps.Map(document.getElementById("map"), mapProp);
    $(document).ready(function() {
        google.maps.event.addListener(map, "idle", function(){
            google.maps.event.trigger(map, 'resize');
        });
    });
  }
}

的index.html

<script src="http://maps.googleapis.com/maps/api/js?key=APIKEY"></script>

任何人都能看到我失踪的东西吗？

我正在以角度2 btw

进行应用