구글지도 - 기본 제어 세트 :
구글지도 - 기본 컨트롤
표준 구글 맵을 나타내는 경우, 디폴트 컨트롤 세트 제공 :
- 줌 - 슬라이더 또는 표시 "+/-" 지도의 줌 레벨을 제어하는 버튼을
- 팬 -지도를 패닝 팬 컨트롤을 표시
- 지도 유형은 -지도 유형의 사용자 전환 할 수 있습니다 (roadmap and satellite)
- 스트리트 뷰 - 스트리트 뷰를 사용할 수 있도록지도를 드래그 할 수있는 페그 맨 아이콘이 표시됩니다
구글지도 - 기타 컨트롤
기본 컨트롤 외에도, Google지도도 있습니다
- 스케일 -지도 축척 요소를 표시
- 회전 - 당신이지도를 회전 할 수 있도록하는 작은 원형 아이콘이 표시됩니다
- 개요지도 - 넓은 지역에서 현재지도 뷰포트를 반영 썸네일 개요지도를 표시
당신은지도를 만들 때 표시 할 컨트롤을 지정할 수 있습니다 (inside MapOptions) 또는 호출하여 setOptions() 지도의 옵션을 변경할 수 있습니다.
구글지도 - 기본 컨트롤을 비활성화
대신 기본 컨트롤을 해제 할 수 있습니다.
이렇게하려면 true로 (지도 옵션 개체 내에서)지도의 disableDefaultUI 속성 설정 :
구글지도 - 모든 제어 켜기
일부 컨트롤은 기본적으로지도에 표시; 당신이 그들을 설정하지 않는 한 다른 사람이 표시되지 않습니다있다.
지도에서 추가 또는 제거 컨트롤이 옵션은 오브젝트 맵에서 지정됩니다.
그것을 숨기기 위해 거짓으로 컨트롤을 설정 -이 표시되도록 true로 컨트롤을 설정합니다.
다음 예는 변 "on" 모든 컨트롤 :
예
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true »그것을 자신을 시도 구글지도 - 수정 컨트롤
지도 컨트롤 중 일부는 구성 할 수 있습니다.
컨트롤이 제어 옵션 필드를 지정하여 변경 될 수있다.
예를 들어, 줌 컨트롤을 수정하는 옵션은 zoomControlOptions 필드에 지정됩니다. 에 ZoomControlOptions 필드를 포함 할 수있다 :
- google.maps.ZoomControlStyle.SMALL은 - 미니 줌 컨트롤을 표시 (전용 +와 - 버튼)
- google.maps.ZoomControlStyle.LARGE은 - 표준 줌 슬라이더 컨트롤을 표시합니다
- google.maps.ZoomControlStyle.DEFAULT는 - 장치 및지도 크기에 기초하여, 최적 줌 제어를 집어
Note: 당신이 컨트롤을 수정하는 경우, 항상 먼저 컨트롤을 활성화 (set it to true) .
또 다른 구성 제어는 MapType 컨트롤입니다.
컨트롤을 수정하기위한 옵션은 mapTypeControlOptions에 필드에 지정되어 있습니다. mapTypeControlOptions에 필드를 포함 할 수있다 :
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - 각 맵 유형에 대한 표시 하나의 버튼
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - 드롭 다운 메뉴를 통해 선택지도 유형
- google.maps.MapTypeControlStyle.DEFAULT가 - 디스플레이 "default" 동작을 (depends on screen size)
예
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
} »그것을 자신을 시도 구글지도 - 사용자 정의 컨트롤
항상 다시 런던으로 돌아갑니다 사용자 지정 컨트롤을 만들고, 클릭했을 때 (if the map is dragged) :
예
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); »그것을 자신을 시도