2011-04-18 7 views
1

기본적으로는 http://maps.google.com을 복사하고 싶습니다. Google지도를 '전체 화면'으로 사용하고 슬라이드 메뉴를 슬라이드 아웃 할 수 있습니다. 그러나 슬라이딩 아웃하면 줌 컨트롤이 '따라 움직여야'하고 메뉴 뒤에 숨어서는 안됩니다.Google지도가 이에 따라 이동합니다.

편집 : 분명히하기 : Google지도를 100 % 100 % 원한다면 작동하도록하십시오. 나 또한 왼쪽 위 모서리 (또는 전체 왼쪽면)에 메뉴 오버레이를 넣고 빼낼 수있는 기능이 필요합니다. 그러나 왼쪽 상단에는 Google지도 확대/축소 컨트롤이 있습니다. 메뉴를 숨기지 않으려 고합니다. 내 메뉴가 열렸을 때 '스쿠트'하고 싶습니다.

구글은 웹 기반 버전뿐만 아니라이 작업을 수행 : http://maps.googl.com

+1

무슨 뜻인지 이해가 안됩니다. * Google지도와 같은 것을 구현하고 싶습니까? 또는 * a * Google지도를 포함 시키시겠습니까? –

+0

내 질문을 편집했습니다 –

답변

0

당신은 설정 올바른 HTML을 작성해야합니다. 예를 들어 :

HTML

<div id="main-wrapper"> 
    <div id="left-menu-wrapper"> 
    <!-- code with navigation --> 
    <a href="javascript:toggleMenu();"> Show/Hide </a> 
    </div> 
    <div id="google-window-wrapper"> 
    <!-- code to display google map here --> 
    </div> 
</div> 

CSS

#main-wrapper { 

} 
#left-menu-wrapper{ 
    width:200px; 
    float:left; 
} 
#google-window-wrapper{ 
    width:auto; 
} 

스크립트

var windowHidden = false; 
function toggleMenu(){ 
    windowHidden = !windowHidden; 
    document.getElementById("left-menu-wrapper").style.width = 
       (windowHidden) ? "0px" : "200px"; 
} 
(메뉴 블록을 전환하는 데 사용)

찾고 계신가요?

+0

내 질문을 편집했습니다 –

+0

나는 Gerben에 대해 100 % 잘못된 생각을 가지고 있다고 생각합니다. 내 HTML 레이아웃 *을 제안하는 방식은 사용자의 요구에 맞게 작동해야합니다. Google지도 웹 사이트의 메뉴는 **지도 위에 ** 가지 않습니다 ** 이동 ** Google지도. –

+0

지도 자체를 정적으로 만들고 싶습니다.이 줌 컨트롤러 요소를 움직 이기만하면됩니다. Google지도 웹 사이트의 –

관련 문제