구글맵 - 컨트롤 옵션

컨트롤 옵션

여러 컨트롤을 구성하여 컨트롤의 동작이나 모양을 변경할 수 있습니다. 예를 들어 확대/축소 컨트롤은 슬라이더가 있는 전체 확대/축소 컨트롤과 함께 큰 컨트롤로 표시되거나 작은 지도의 경우 작은 미니 확대/축소 컨트롤로 표시될 수 있습니다.

이러한 컨트롤은 지도를 만들 때 MapOptions 객체에서 해당 컨트롤 options 필드를 변경하여 수정할 수 있습니다. 예를 들어 확대/축소 컨트롤을 수정하는 옵션은 zoomControlOptions 필드에 지정됩니다.

확대/축소 컨트롤은 다음 style 옵션 중 하나로 표시될 수 있습니다.

• google.maps.ZoomControlStyle.SMALL은 + 및 - 버튼만으로 구성된 미니 확대/축소 컨트롤을 표시합니다. 이 스타일은 작은 지도에 적합합니다. 터치 기기에서는 이 컨트롤이 터치 이벤트에 응답하는 + 및 - 버튼으로 표시됩니다.
• google.maps.ZoomControlStyle.LARGE는 표준 확대/축소 슬라이더 컨트롤을 표시합니다. 터치 기기에서는 이 컨트롤이 터치 이벤트에 응답하는 + 및 - 버튼으로 표시됩니다.
• google.maps.ZoomControlStyle.DEFAULT는 지도 크기 및 지도가 실행되는 기기에 따라 적절한 확대/축소 컨트롤을 선택합니다.

MapType 컨트롤은 다음 style 옵션 중 하나로 표시될 수 있습니다.

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR는 Google 지도에서처럼 가로 막대에 컨트롤 배열을 버튼으로 표시합니다.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU는 드롭다운 메뉴를 통해 지도 유형을 선택할 수 있는 단일 버튼 컨트롤을 표시합니다.
• google.maps.MapTypeControlStyle.DEFAULT는 '기본' 동작을 표시하며 화면 크기에 따라 달라지고 이후 버전의 API에서 변경될 수 있습니다.

컨트롤 옵션을 수정하는 경우 적절한 MapOptions 값을 true로 설정하여 컨트롤을 명시적으로 활성화해야 합니다. 예를 들어, 확대/축소 컨트롤에서 SMALL 스타일을 표시하도록 설정하려면 MapOptions 객체에서 다음 코드를 사용합니다.

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

다음 예제는 드롭다운 MapType 컨트롤을 설정하고 확대/축소 컨트롤에서 작은 미니 확대/축소 레이아웃을 사용하도록 지정합니다.

function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
}

예 보기(control-options.html)

컨트롤은 일반적으로 지도를 만들 때 구성됩니다. 그러나 Map의 setOptions() 메소드를 호출하여 새 컨트롤 옵션을 전달함으로써 컨트롤 표시를 동적으로 변경할 수 있습니다.