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");
}