Google 지도 컨트롤


Google 지도 - 기본 컨트롤

표준 Google 지도를 표시할 때 기본 컨트롤 세트와 함께 제공됩니다.

  • 확대/축소 - 지도의 확대/축소 수준을 제어하는 ​​슬라이더 또는 "+/-" 버튼을 표시합니다.
  • 팬 - 지도를 패닝하기 위한 팬 컨트롤을 표시합니다.
  • MapType - 사용자가 지도 유형(로드맵 및 위성) 간에 전환할 수 있습니다.
  • 스트리트 뷰 - 스트리트 뷰를 활성화하기 위해 지도로 드래그할 수 있는 Pegman 아이콘을 표시합니다.

Google 지도 - 추가 제어

기본 컨트롤 외에도 Google 지도에는 다음 기능이 있습니다.

  • 축척 - 지도 축척 요소를 표시합니다.
  • 회전 - 지도를 회전할 수 있는 작은 원형 아이콘을 표시합니다.
  • 개요 맵 - 더 넓은 영역 내에서 현재 맵 뷰포트를 반영하는 썸네일 개요 맵을 표시합니다.

지도를 만들 때(MapOptions 내에서) 표시할 컨트롤을 지정하거나 setOptions()를 호출하여 지도의 옵션을 변경할 수 있습니다.


Google 지도 - 기본 컨트롤 비활성화

대신 기본 컨트롤을 끌 수도 있습니다.

이렇게 하려면 지도의 disableDefaultUI 속성(지도 옵션 개체 내)을 true로 설정합니다.

예시

var mapOptions {disableDefaultUI: true}


Google 지도 - 모든 컨트롤 켜기

일부 컨트롤은 기본적으로 지도에 표시됩니다. 당신이 그들을 설정하지 않는 동안 다른 사람들은 나타나지 않습니다.

지도에서 컨트롤을 추가하거나 제거하는 것은 지도 옵션 개체에 지정됩니다.

컨트롤을 표시하려면 true로 설정하고 숨기려면 컨트롤을 false로 설정합니다.

다음 예에서는 모든 컨트롤을 "켜기"로 설정합니다.

예시

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

Google 지도 - 컨트롤 수정

여러 맵 컨트롤을 구성할 수 있습니다.

제어 옵션 필드를 지정하여 제어를 수정할 수 있습니다.

예를 들어 확대/축소 컨트롤을 수정하기 위한 옵션은 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
}