創建地圖示例，點擊進入實際地圖

Question

我正在嘗試構建一些內容，以防止用戶點擊地圖的交互方面，直到他們最初單擊地圖時所顯示的內容，例如當您在谷歌搜索諸如多倫多吃飯中心等地點時顯示的內容。

我做了一個可視化模擬，以更好地解釋：

我使用谷歌地圖，我沒能獲得一個div浮動在谷歌地圖（這是我在用僅僅有創建這個第一次嘗試一個div浮動，點擊時會消失，地圖會通過javascript調整大小）。 Google在搜索位於here的位置示例時效果很好。

這是我的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