谷歌地图没有填满整个 div答案

【问题标题】：Google Maps not filling up the entire div谷歌地图没有填满整个 div
【发布时间】：2014-11-06 15:12:20
【问题描述】：

我一直在尝试在我的网站上设置谷歌地图，但它只显示了其中的一小部分，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");

Map Canvas 和它的包装 div 都设置为 100% 宽度。感谢所有帮助

下面是它的样子：

【问题讨论】：

你能在 JSFiddle 上重新创建吗？感觉可能与stackoverflow.com/questions/9141249/…有关
我的第一感觉是窗口（或地图画布）在初始化后调整了大小。但无论如何， google.maps.event.trigger(map, "resize");必须写在初始化函数中；否则地图还不存在。

标签： jquery google-maps

【解决方案1】：

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

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

【讨论】：

我得到和以前一样的结果
@Granit，你能分享更多关于你的代码如何调用 GMaps 的细节吗？你在使用任何 javascript 库吗？
我正在使用一些 jQuery 来隐藏和显示我的地图，但仅此而已。 $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); });
是的，也没有结果。但是如果我手动将浏览器调整为移动设备然后全屏，由于某种原因它会覆盖整个 div！

【解决方案2】：

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

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

【讨论】：