谷歌地图作为背景

有没有一种性感的方式来获取与谷歌地图的网页（全屏），只有一个小的div＃头顶部和一个小的div＃容器在中间？谷歌地图作为背景

我已经做了一些研究，我发现这个例子：http://koti.mbnet.fi/ojalesa/exam/index.html ...但这不是我想要做的。

如果你有一个漂亮的网站示例的瘦代码示例，这将帮助我很多。

很多谢谢。

2010-04-07 Puru puru rin..

您可以使用position: absolute或position: fixed随机将HTML元素定位到（基于HTML）Google Map的顶部。你只需要给他们一个z-index高于谷歌地图中的任何元素。

未经测试，但这些方针的东西应该工作：

<style type="text/css"> 
    .Overlay { position: absolute; left: 0px; top: 0px; 
      right: 0px; height: 50px; background-color: white; z-index: 100 } 
</style> 

... Fullscreen Google Map (or whatever)..... 

<div class="Overlay">I'm on top of a Google Map!</div>

来源

2010-04-07 18:35:05

哇，效果很好！谢谢Pekka。 – 2010-04-07 19:36:57

@皮卡我嵌入在iframe中的地图，我可以使用的位置：固定？ – 2013-03-25 08:33:58

如果你持有与position: relative一个div对谷歌地图的iframe，使div相同尺寸的iframe，然后你可以使用position: absolute在相对定位的div内的其他元素上，以将它们覆盖在GMap所需的位置上。您可能需要修改您希望在GMap上定位的内容的css属性z-index。

来源

2010-04-07 18:39:13 Finbarr

我认为你是对的。 – 2013-03-25 08:35:37

下面是它是如何做一个很好的新手必看：

http://blog.wadehammes.com/post/3837158298

来源

2012-04-30 11:34:16 oivvio

这个解决方案的一个问题是，如果需要滚动，地图不会伸展，并且向下滚动时会留下一个难看的空白区域 – Bryan 2012-10-10 22:23:47