Google지도는 컨트롤 집합

이전 : Google지도 이벤트

다음 : 구글지도 유형

구글지도 - 기본 컨트롤 세트가 설정됩니다 :

표준 구글 맵을 사용하는 경우 다음과 같이 기본 설정은 다음과 같습니다

.Zoom-는 줌 레벨 맵을 제어하는 슬라이더 막대를 표시합니다
.PPan-지도 표시에 팬지도의 네 모서리를 클릭, 평평한 그릇과 같은 컨트롤입니다
.MapType-는 사용자가지도 유형 (로드맵과 satallite) 스위치를 선택하는 데 사용
.StreetView-은 스트리트 뷰를 엽니지도에 점으로 드래그 할 수 있습니다, 사람 모양의 아이콘으로 나타납니다

구글지도 - 더 컨트롤 세트

상기 기본 제어 세트 또한 Google도 :

.Scale- 표시지도 축척
아이콘의 작은 둘레를 표시 .Rotate-, 당신은지도를 회전 할 수 있습니다
광역지도의 관점에서 맵 - 평면도를 .verview

당신이 옵션을 설정하거나 setOptions을 호출하여 표시되는 컨트롤의 집합을 지정할 수있는지도를 만들 때 () 옵션을 설정지도를 변경합니다.

구글지도 - 기본 제어 설정을 해제

당신은 컨트롤의 기본 설정을 해제 할 수 있습니다.

disableDefaultUI 사실을 매핑 속성을 설정, 기본 제어 설정을 해제하려면 :

예

disableDefaultUI:true

»시도

구글지도 - 열도록 설정 모든 컨트롤

다른 사람들이하지 않습니다 동안을 설정하지 않는 일부 컨트롤은지도의 기본 표시를 설정합니다.

그것은 눈에 보이는 사실 수 있도록 컨트롤을 설정 - 그것을 숨기기 위해 거짓으로 컨트롤을 설정합니다.

다음 예는 모든 컨트롤 열려 있습니다 :

예

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

»시도

구글지도 - 제어 설정을 수정

일부 맵 컨트롤을 구성 할 수 있습니다. 컨트롤 옵션 필드를 개발하여 설정 제어를 변경합니다.

예를 들어 F는 줌 컨트롤 옵션에 ZoomControlOptions을 지정 수정할 수 있습니다. 에 ZoomControlOptions는 다음과 같은 세 가지 옵션이 포함되어 있습니다 :

.google.maps.ZoomControlStyle.SMALL- 디스플레이는 줌 조절을 최소화
.google.maps.ZoomControlStyle.LARGE- 표준 줌 슬라이드 쇼 컨트롤
가장 적절한 컨트롤을 선택, 기반 장비 및지도의 크기를 .google.maps.ZoomControlStyle.DEFAULT-

예

zoomControl : true ,
zoomControlOptions : {
style : google . maps . ZoomControlStyle . SMALL
}

»시도

참고 : 제어, 최초의 회전 제어 (true로 설정) 수정해야하는 경우.

또 다른 컨트롤은 MapType 컨트롤입니다.

지도 유형 컨트롤은 다음과 같은 스타일 옵션 중 하나에 나타날 수 있습니다 :

Google지도에 나타낸 바와 같이 google.maps.MapTypeControlStyle.HORIZONTAL_BAR는 가로 막대에 컨트롤 버튼의 집합으로 표시됩니다.
google.maps.MapTypeControlStyle.DROPDOWN_MENU, 드롭 다운 메뉴에서지도 유형을 선택할 수있는 하나의 버튼 컨트롤을 표시합니다.
google.maps.MapTypeControlStyle.DEFAULT, 화면의 크기에 따라 달라집니다 및 API의 향후 버전에서 변경 될 수 있습니다 "기본"동작을 표시합니다.

예

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

»시도

마찬가지로 위치 ControlPosition은 속성 지정 컨트롤을 사용할 수 있습니다 :

예

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}

»시도

구글지도 - 설정 사용자 지정 컨트롤

(지도를 드래그하는 경우) : Click 이벤트 런던으로 돌아 사용자 지정 컨트롤을 만듭니다

예

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);

»시도