当容器 div 收缩时，google 地图消失

Question

我在 div 结构中有一个 google 映射，如下所示：

<div style="width:100%;height:100%;">
    <div id="divLeft" style="float:left;width:445px;height:100%;position:relative;overflow-y:scroll;overflow-x:hidden">
    <div id="divRight" style="float:left;width:75%;position:relative">
         <input id="searchTextField" type="text" />
         <div id="map-canvas" style="width:100%;height:100%"></div>
    </div>
</div>

map-canvas div 是实际地图。

在我开始调整浏览器 window 以使其变小之前，所有这些都工作正常。或者即使 window 开始时太小。 google 地图完全消失。当地图消失时，我已经确定了 window 的确切像素宽度。在 1335 像素宽度或更大时，地图就在那里。在 1334 像素宽度或更小时，它就消失了。请注意 divRight（map-canvas 的 div 容器）的初始宽度从 75% 开始。这似乎是错误和武断的，但这是我能找到的所有方法。任何更高的百分比和地图从一开始就消失。 window 高度可以是任何东西，地图很好。只是宽度导致它消失。 divLeft需要固定宽度445px，但是我想让divRight和map-canvas100%填充剩下的windowspace.

这似乎也没有解决问题：

$(window).resize(function() {
    google.maps.event.trigger(map, "resize");
});

我也尝试过 jquery 的动态调整特技，但没有成功：

$(window).resize(function() {
    $("#map-canvas").css("width", $("#divRight").width());
    $("#map-canvas").css("height", $("#divRight").height());
    google.maps.event.trigger(map, "resize");
});

这是一个简化的 web page showing the problem。如果你在右侧div看不到google地图，只是一堆白色space，那么你的浏览器window宽度小于1335像素.不知道那个宽度有什么特别之处。

为什么google地图要在一定宽度处消失，我该如何解决？

Answer 1

问题是在断点处右窗格的 75% 宽度大于 window 宽度减去左窗格的 445px。

因此，由于 body 高度为 100% 且溢出隐藏，因此浮动被向下推且不可见。

作为快速测试，将左窗格宽度设置为 25%，地图将始终显示。

结论：

您的调整代码处理了错误的元素。它应该检查 #divRight 宽度是否适合 window

当容器 div 收缩时，google 地图消失

When container div shrinks, google map disappears

html

css

jquery

google-maps

google-maps-api-3