Bootstrap Modal上的Google Map為灰色-調整窗口大小使其顯示

Question

我在頁面加載后運行此功能，但沒有顯示地圖，只有一個帶有Google徽標和底部使用條款按鈕的灰色正方形：

initMap() {
    var area = new google.maps.LatLngBounds(
        new google.maps.LatLng(-47.746617, 165.346753),
        new google.maps.LatLng(-33.670946, -179.667808)
    );


    var options = {
        bounds: area,
    zoom: 13
    };
    //this.autocomplete = new google.maps.places.Autocomplete(<HTMLInputElement>this.areaInput.areaInput.nativeElement, options);



       var  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -33.8688, lng: 151.2195 },
    zoom: 13
});
google.maps.event.trigger(map, "resize");

}

HTML：

<div id="map"></div>

CSS：

#map {
        height: 300px;
        overflow: visible;
        width:100%
    }

    #map * {
        overflow: visible;
    }

為什么地圖只是一個灰色方塊？

編輯-調整窗口大小時，將顯示地圖。 為什么是這樣？

我如何使其顯示而無需調整窗口大小？

該地圖位於引導程序模態上。 用戶必須單擊某些內容才能使模式出現。 該地圖出現，但為灰色，沒有實際地圖，直到使用鼠標手動調整窗口大小為止。

編輯：這與時間有關。 如果我掛了一個按鈕來調整地圖大小，則單擊按鈕時它會起作用。

Answer 1

div（#map）中有錯誤，應為div設置適當的大小

 <div id="map" style='width: 400px; height: 400px;'></div>

你錯過了;

#map {
    height: 300px;
    overflow: visible;
    width:100%;    /*   here */
}

#map * {
    overflow: visible;
}

Answer 2

大約一年后，也許有人可以從這個答案中受益：)。 我有同樣的問題，我這樣解決：在initMap函數中，我觸發了調整大小

    function initMap() {
    var myCenter = new google.maps.LatLng(20.296100, 85.824500);
    var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({ position: myCenter });
    marker.setMap(map);

    $('a[href="#apartmentInfo"]').on('shown.bs.tab', function (e) {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(mapProp.center);
    });
};

Answer 3

最終是因為它處於引導程序模態。 需要掛接到“顯示”的引導程序模式生命周期事件中，以確保它已完全加載。 沒想到模式會成為一個因素，因為我過去在沒有問題的情況下就采用了模式。

$('#result-details-modal').on('shown.bs.modal', (e) => {
    this.resizeMap();
})

resizeMap() {
    var map = new google.maps.Map(document.getElementById('map'), this.options);
    google.maps.event.trigger(map, "resize");
}