在平移或移动之前，映射数据不会填充整个地图元素

Question

我在DevExtreme Popup中显示Google地图（使用Bootstrap）。该映射作为ASP.NET核心视图组件的内容返回。

地图会占据整个div（Google徽标，控件等），但实际的地图数据本身却没有。占用面积较小，其他地方只有灰色：

现在，只要我对地图做任何事情 - 稍微平移，放大，缩小，地图占据整个元素：

以下是创建地图的ViewComponent内容：

<script>
var propertyMap = new google.maps.Map(document.getElementById('mapContainer'), {
    zoom: 10,
    center: { lat: 40.71, lng: -74.01 },
    mapTypeId: google.maps.MapTypeId.HYBRID
});
</script>

<div id="mapContainer" style="width: 100%; height: 100%;"></div>

AJAX函数检索ViewComponent并将内容放在弹出窗口中：

var mapPopup = $("<div />").appendTo($("body")).dxPopup({
width: 930,
height: 650,
visible: false,
closeOnOutsideClick: true
});

function showMapPopup() {
$.ajax({
    type: "POST",
    url: "/Maps/PropertyMap",
}).done(function (data) {
    mapPopup.dxPopup({
        contentTemplate: data
    });
    mapPopup.dxPopup("instance").show();
    google.maps.event.trigger(propertyMap, 'resize');
});
}

我在根据较旧的类似问题显示弹出窗口后尝试添加google.maps.event.trigger(propertyMap, 'resize')事件，但它没有帮助。