谷歌地图没有填满整个div

Question

我一直试图在我的网站上设置谷歌地图，但它只显示了一小部分，div仍然是空的。许多解决方案建议我包含调整大小功能，但这似乎不起作用。这是我的代码：

function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
        center: new google.maps.LatLng(42.378343, 20.427202),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.trigger(map, "resize");

地图画布及其包装div均设置为100％宽度。感谢所有帮助

看起来像它的样子：

Answer 1

尝试在地图完全加载时触发地图上的调整大小：

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
});

Answer 2

在面板打开后我调用了地图调整大小功能，地图按照我想要的方式调整了大小，填满了div。

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        google.maps.event.trigger(map, "resize");
    });
});