구글맵 - 지도에 컨트롤 추가 & 삭제

지도에 컨트롤 추가하기

UI 동작 또는 컨트롤을 제거, 추가 또는 수정하고 이후의 업데이트로 인해 동작이 변경되지 않게 하여 인터페이스를 원하는 대로 조정할 수 있습니다. 기존 동작을 추가하거나 수정하기만 하려는 경우 애플리케이션에 컨트롤을 명시적으로 추가해야 합니다.

일부 컨트롤은 지도에 기본적으로 표시되지만 다른 컨트롤은 특별히 요청하지 않는 한 표시되지 않습니다. 지도에서 컨트롤을 추가하거나 제거하는 것은 Map options 객체의 필드에서 지정하는데, 컨트롤을 표시하려면 true로 설정하고 숨기려면 false로 설정합니다.

{
  panControl: boolean,
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  overviewMapControl: boolean
}

다음 예제는 탐색(확대/축소 및 이동) 컨트롤을 숨기고 축척 컨트롤을 표시하도록 지도를 설정합니다. 여기서는 기본 UI를 명시적으로 비활성화하지는 않으므로 수정사항이 기본 UI 동작에 추가됩니다.

function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    panControl: false,
    zoomControl: false,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}

예 보기(control-simple.html)

컨트롤 수정하기

지도의 MapOptions 객체 내에서 필드를 통해 지도를 만들 때 컨트롤 표시를 지정합니다. 이러한 필드는 다음과 같습니다.

• mapTypeControl - 사용자가 지도 유형(예: 지도 및 위성) 간에 전환할 수 있게 해주는 MapType 컨트롤을 활성화/비활성화합니다. 기본적으로 이 컨트롤은 표시되며 지도의 오른쪽 상단에 나타납니다. mapTypeControlOptions 필드는 이 컨트롤에 사용할MapTypeControlOptions를 추가로 지정합니다.
• panControl은 이동 컨트롤을 사용 또는 사용하지 않도록 설정합니다. 기본적으로 이 컨트롤은 표시되며 지도의 왼쪽 상단에 표시됩니다. panControlOptions 필드는 이 컨트롤에 사용할 PanControlOptions를 추가로 지정합니다.
• zoomControl은 확대/축소 컨트롤을 사용 또는 사용하지 않도록 설정합니다. 기본적으로 이 컨트롤은 표시되며 지도의 왼쪽 상단에 표시됩니다. zoomControlOptions 필드는 이 컨트롤에 사용할 ZoomControlOptions를 추가로 지정합니다.
• scaleControl - 간단한 지도 축척을 제공하는 Scale 컨트롤을 활성화/비활성화합니다. 기본적으로 이 컨트롤은 표시되지 않습니다. 그러나 표시되도록 설정하면 지도의 왼쪽 하단에 나타납니다. scaleControlOptions는 이 컨트롤에 사용할ScaleControlOptions를 추가로 지정합니다.
• rotateControl은 45° 이미지의 방향을 조정하기 위한 회전 컨트롤을 표시할지 또는 표시하지 않을지를 설정합니다. 기본적으로 컨트롤 표시 여부는 현재의 확대/축소 및 위치에서 지정된 지도 유형에 대해 45° 이미지가 존재하는지 또는 부재하는지에 따라 결정됩니다. 컨트롤의 동작은 RotateControlOptions를 사용하도록 지정하는 지도의 rotateControlOptions를 설정하여 변경할 수 있습니다. 하지만 현재 사용할 수 있는 45° 이미지가 없으면 컨트롤을 표시할 수 없습니다.
• overviewMapControl은 평면 지도 컨트롤을 사용 또는 사용하지 않도록 설정합니다. 평면 지도 컨트롤은 완전히 표시되어 미리보기 이미지 평면 지도를 표시하거나 최소화된 상태로 축소되어 표시될 수 있습니다. 컨트롤은 기본적으로 사용하지 않도록 설정되며 축소된 상태로 표시됩니다. overviewMapControlOptions는 이 컨트롤에 사용할 OverviewMapControlOptions를 추가로 지정합니다.

초기에 비활성화하는 컨트롤에 대해 옵션을 지정할 수도 있습니다.