创建单击实际地图的地图示例

Question

我正在尝试构建阻止用户点击地图的交互方面的内容，直到他们最初点击地图，就像您在谷歌搜索多伦多吃饭中心这样的地方时所显示的那样。

我做了一个视觉模拟以更好地解释：

我正在使用谷歌地图，我无法让一个div漂浮在谷歌地图上（这是我第一次尝试创建这个，只是有一个div浮动，当点击时会消失，地图会调整大小通过javascript）。当您搜索找到here的位置示例时，Google会做得很好。

这是我的fiddle尝试将div浮动到顶部以便我可以使用它来点击实际地图。

下面是浮动div的css，即使有绝对位置和z索引也不会显示在地图上方

.map-floater {
position: absolute;
z-index: 3;
height: 280px;
width: 100%;
background: #555;
opacity: 0.7;
}

Answer 1

您的标记不正确，将叠加层放在与地图相同的容器中

   <div class = "map-holder"> 
       <div class = "map-floater"> </div>
       <iframe src="path/to/map" width= "100%" height = "380px" frameborder="0"/>
    </div>

的 DEMO