구글맵 - 컨트롤 배치

컨트롤 배치하기

각 컨트롤 옵션에는 컨트롤을 배치할 지도의 위치를 나타내는 ControlPosition 유형의 position 속성이 포함되어 있습니다. 이러한 컨트롤을 반드시 배치할 필요는 없습니다. API가 지도 크기 등 지정된 제약조건 내에서 기존 지도 요소나 다른 컨트롤 주변에 '흐르게' 하여 지능적으로 컨트롤의 레이아웃을 지정합니다. 참고: API는 컨트롤을 지능적으로 정렬하지만 지정된 복잡한 레이아웃에서 컨트롤이 겹치지 않는다고 보장할 수는 없습니다.

지원되는 컨트롤 위치는 다음과 같습니다.

• TOP_CENTER - 지도의 상단 중심을 따라 컨트롤을 배치해야 합니다.
• TOP_LEFT - 지도의 왼쪽 상단을 따라, 컨트롤의 하위 요소가 상단 중심을 향해 '흐르도록' 하여 컨트롤을 배치해야 합니다.
• TOP_RIGHT - 지도의 오른쪽 상단을 따라, 컨트롤의 하위 요소가 상단 중심을 향해 '흐르도록' 하여 컨트롤을 배치해야 합니다.
• LEFT_TOP은 컨트롤이 지도의 왼쪽 상단을 따라, 모든 TOP_LEFT 요소 아래에 배치되어야 함을 나타냅니다.
• RIGHT_TOP은 컨트롤이 지도의 오른쪽 상단을 따라, 모든 TOP_RIGHT 요소 아래에 배치되어야 함을 나타냅니다.
• LEFT_CENTER는 컨트롤이 지도의 왼쪽을 따라, TOP_LEFT 및 BOTTOM_LEFT 위치 사이의 중앙에 배치되어야 함을 나타냅니다.
• RIGHT_CENTER는 컨트롤이 지도의 오른쪽을 따라, TOP_RIGHT 및 BOTTOM_RIGHT 위치 사이의 중앙에 배치되어야 함을 나타냅니다.
• LEFT_BOTTOM은 컨트롤이 지도의 왼쪽 하단을 따라, 모든 BOTTOM_LEFT 요소 위에 배치되어야 함을 나타냅니다.
• RIGHT_BOTTOM은 컨트롤이 지도의 오른쪽 하단을 따라, 모든 BOTTOM_RIGHT 요소 위에 배치되어야 함을 나타냅니다.
• BOTTOM_CENTER - 지도의 하단 중심을 따라 컨트롤을 배치해야 합니다.
• BOTTOM_LEFT - 지도의 왼쪽 하단을 따라, 컨트롤의 하위 요소가 하단 중심을 향해 '흐르도록' 하여 컨트롤을 배치해야 합니다.
• BOTTOM_RIGHT - 지도의 오른쪽 하단을 따라, 컨트롤의 하위 요소가 하단 중심을 향해 '흐르도록' 하여 컨트롤을 배치해야 합니다.

이러한 위치는 저작권이나 Google 로고처럼 게재위치를 수정할 수 없는 UI 요소의 위치와 일치할 수도 있습니다. 이 경우 컨트롤은 각 위치에 대해 명시된 논리에 따라 '흐르며' 가능한 한 지정한 위치에 가깝게 표시됩니다.

다음 예는 모든 컨트롤이 서로 다른 위치에서 활성화된 간단한 지도를 보여줍니다.

function initialize() {
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-28.643387, 153.612224),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
}

예 보기(control-positioning.html)