Map data not filling entire map element until panned or moved

Question

I'm displaying a Google map in a DevExtreme Popup (uses Bootstrap). The map is returned as content of an ASP.NET Core View Component.

The map takes up the entire div (Google logo, controls, etc.) but the actual map data itself doesn't. It takes up a smaller area and just has gray elsewhere:

Now, as soon as I do anything with the map - pan it slightly, zoom in, zoom out, the map takes up the entire element:

Here is the ViewComponent content that creates the map:

<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>

And the AJAX function that retrieves the ViewComponent and places the content in the popup:

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

I tried adding the google.maps.event.trigger(propertyMap, 'resize') event after showing the popup based on an older, similar question but it didn't help.

Answer 1

I ended up wrapping the map creation in a function:

<script>
function createMap() {
    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>

And then not calling it until the modal is shown:

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

There's a slight delay when the modal opens and the map showing since its not being created until then, but at least it fills the entire element now.