구글 맵 컨트롤

구글 맵 - 기본 컨트롤

표준 구글 맵을 표시할 때, 기본 컨트롤 집합을 제공합니다：

  • 확대/축소(Zoom) - 지도 확대/축소 수준을 제어하는 슬라이더나 "+/-" 버튼을 표시합니다
  • 스크롤(Pan) - 지도를 이동할 수 있는 스크롤 컨트롤을 표시합니다
  • 지도 타입(MapType) - 사용자가 지도 타입(지도 및 위성 이미지) 간으로 전환할 수 있도록 합니다
  • 스트리트 뷰(Street View) - 거리 뷰 인형 아이콘(Pegman icon)을 표시하며, 이를 지도에 끌어서 거리 뷰를 활성화할 수 있습니다

구글 맵 - 더 많은 컨트롤

기본 컨트롤 외에도 구글 맵은 다음과 같은 컨트롤을 제공합니다：

  • 비율(Scale) - 지도 비율 요소를 표시합니다
  • 회전(Rotate) - 지도를 회전할 수 있는 작은 원형 아이콘을 표시합니다
  • 개요 맵(Overview Map) - 현재 맵 뷰포트 내의 더 넓은 区域을 반영하는 축소판 맵을 표시합니다

지도를 생성할 때 표시할 컨트롤을 규정할 수 있습니다.(MapOptions 내) 또는 setOptions()를 호출하여 맵의 옵션을 변경할 수 있습니다。

구글 맵 - 기본 컨트롤 비활성화

기본 컨트롤을 꺼고 싶을 수 있습니다。

이에 따라, 맵의 disableDefaultUI 속성(맵의 옵션 객체 내)을 true로 설정하십시오：

인스턴스

var mapOptions {disableDefaultUI: true}

구글 맵 - 모든 컨트롤 열기

일부 컨트롤은 기본적으로 지도에 표시됩니다；그리고 다른 컨트롤은 표시되지 않습니다. 설정하지 않으면 그렇습니다。

지도 옵션 객체에서 지도에 추가하거나 제거할 컨트롤을 지정해 주세요。

컨트롤을 true로 설정하면 보이게 됩니다 - false로 설정하면 숨겨집니다。

이 예제는 모든 컨트롤을 열어줍니다：

인스턴스

var mapOptions {
  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 - 기기와 맵 크기에 따라 최적의 줌 컨트롤을 선택

인스턴스

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

주의: 컨트롤을 수정하려면 먼저 컨트롤을 활성화하십시오(또는 true로 설정하십시오).

다른 설정 가능한 컨트롤 중 하나는 MapType 컨트롤입니다。

mapTypeControlOptions 필드는 컨트롤을 수정하는 옵션을 정의합니다. mapTypeControlOptions 필드는 다음과 같은 항목을 포함할 수 있습니다：

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - 为每种地图类型显示一个按钮
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU -下拉菜单选择地图类型
  • google.maps.MapTypeControlStyle.DEFAULT - 스크린 크기에 따라 '기본' 동작을 표시

인스턴스

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
}