실제지도로 클릭하는지도 샘플 만들기

Question

처음에는 토론토 Eaten Center와 같은 장소에서 Google 검색을 할 때처럼지도를 클릭 할 때까지 사용자가지도의 대화 형 기능을 클릭하지 못하도록하는 중입니다.

을 나는 구글 맵을 사용하고 내가 (단지함으로써이 생성에서 내 첫 번째 시도이었다 구글지도 위에 표시하는 사업부를 얻을 수 아니다 :

은 내가 더 잘 설명하기 위해 시각적 모의했다 클릭하면 div float가 사라지고지도는 javascript를 통해 크기가 조정됩니다.) Google은 사용자가 위치 예를 검색 할 때 here을 찾으면이를 잘 수행합니다.

여기 내 fiddle은 실제지도를 클릭 할 때 사용할 수 있도록 div를 맨 위에 올려 놓으려고합니다. 다음은

도 절대 위치 및 z-인덱스지도 위에 표시되지 않습니다 부동 사업부의 CSS입니다

.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