使谷歌地图跨越长页面答案

【问题标题】：Make Google map span long pages使谷歌地图跨越长页面
【发布时间】：2014-01-04 23:27:36
【问题描述】：

我有一个很长的网页，即用户需要向下滚动页面才能看到那里的所有信息。

我使用谷歌地图作为页面的背景。然而，谷歌地图只填满了网站的第一页。当我向下滚动时，地图就不再存在了，它只占了初始视图的 100%。

我遇到了this answer，这表明 Google 地图不知道 100% 的跨度，因此应该在正文中明确提及 height:100% 以便在包含 Google 地图的 div 中提及 height:100% ，它知道它必须跨越整个网页。

我已经尝试了上述解决方案，但它并没有解决我的问题。如何让谷歌地图跨越一个很长的网页？

基本设置是这样的：

<body>
<div id="main-content">  <!--The main data is held here. This is the forefround-->
        This in turn contains several divs and the main information
</div>
<div id="map-canvas">

</div>
</body>

css如下：

#map-canvas {
  width: 100%;
  height: 100%;
  position: absolute; /*changing this to fixed makes the map dissapear*/
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  z-index: 0;
}

#main-content {
  z-index: 100;
  position: relative;
}

html, p, body {
    margin: 0;
    padding: 0;
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;                
    height: 100%;
}

正如其中一个答案所建议的那样，如果地图背景保持不变而页面的其余部分是可滚动的，那就太好了。

【问题讨论】：

您可以发布示例链接或显示您的代码吗？如果没有看到您的设置，很难提供帮助。
是的，我们可以看看一些代码吗？
我添加了一些代码。但我避免投入太多，因为这可能很难全部完成。

标签： javascript html css google-maps google-maps-api-3

【解决方案1】：

如何在地图容器上设置一个固定位置。
我在网上看到了这个 Fiddle：

http://jsfiddle.net/X5r8r/927/

#map-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

它会将地图粘贴到窗口大小的页面上。
任何其他内容都可以保持滚动。

【讨论】：

我使用的是位置：绝对。将其更改为固定会停止显示地图。但我喜欢你的解决方案。如果地图保持固定而其他内容可滚动，那就太好了。
好吧，如果你想用它作为背景，那么在我看来这是最合乎逻辑的解决方案。如果地图不再显示，请检查宽度/高度和 Z-index。它肯定会出现。
我已经检查过了。仍然没有改善:(
检查谷歌浏览器中的元素检查器并将#map-container悬停以检查其尺寸。正如您在 JSFiddle 中看到的，它应该可以工作。创建您自己的 JSFiddle 并重现您遇到的问题。甚至更好；使您的代码适应 JSFiddle 中的代码 - 为什么要修复未损坏的代码？