• 목록

1. The Default Controls

  기본 구글 맵을 보면, 기본 제어 셋을 볼 수 있습니다:

  - Zoom: 맵의 줌 레벨을 제어하는 버튼인 "+/-" 슬라이더

  - Pan: panning을 하기 위한 pan 컨트롤

  - MapType: 맵 타입을 변경하기 위한 버튼

  - Street View: 스트릿 뷰를 보기위한 버튼

 2. More Controls

  기본 제어 셋 이외에도 아래와 같은 제어 셋이 있습니다:

  - Scale: 맵의 크기 단위를 보임

  - Rotate: 맵을 회전시키기 위한 작은 원형 아이콘

  - Overview Maps: 현재 맵에서의 전반적인 썸네일(Thumbnail)

 3. DIsabling The Default Controls

  기본 제어 셋을 끄고 싶다면 아래와 같이 해주시면 됩니다.

function initMap() {

  var seoul = { lat: 37.5642135 ,lng: 127.0016985 };

  map = new google.maps.Map(

document.getElementById('googlemap'), {

  zoom: 12,

  center: seoul,

  disableDefaultUI:true

});

}

4. Turn On All Controls

  몇몇 제어 셋은 맵에 기본적으로 보이나, 다른 제어 셋은 보이지 않을 수도 있습니다.

  맵 옵션 객체에 추가 혹은 삭제를 통해서 맵에 제어 셋을 보일 수 있습니다.

panControl:true,

zoomControl:true,

mapTypeControl:true,

scaleControl:true,

streetViewControl:true,

overviewMapControl:true,

rotateControl:true

5. Modifying Controls

  몇몇 맵 제어는 설정 가능합니다.

  제어는 제어 옵션 필드(control options fields)에 의해 변경 가능합니다.

  예를 들어, 줌 제어 변경을 위한 옵션은 zoomControlOptions 필드에서 명시됩니다. 

  zoomControlOptions 필드는 아래와 같은 속성을 포함합니다:

  - google.maps.ZoomControlStyle.SMALL: 작은 줌 컨트롤 표시

  - google.maps.ZoomControlStyle.LARGE: 표준 줌 슬라이더 컨트롤 표시

  - google.maps.ZoomControlStyle.DEFAULT: 기기와 맵 사이즈를 기반으로한 최적으 줌 컨트롤 표시

6. Custom Controls

  언제든지 자신이 지정한 위치로 이동하기위한 커스텀 컨트롤을 생성할 수 있습니다.

// Add a Home control that returns the user to Suwon

function HomeControl(controlDiv, map) {

  controlDiv.style.padding = '5px';

  var controlUI = document.createElement('div');

  controlUI.style.backgroundColor = 'yellow';

  controlUI.style.border='1px solid';

  controlUI.style.cursor = 'pointer';

  controlUI.style.textAlign = 'center';

  controlUI.title = 'Set map to Suwon';

  controlDiv.appendChild(controlUI);

  var controlText = document.createElement('div');

  controlText.style.fontFamily='Arial,sans-serif';

  controlText.style.fontSize='12px';

  controlText.style.paddingLeft = '4px';

  controlText.style.paddingRight = '4px';

  controlText.innerHTML = '<b>Home<b>'

  controlUI.appendChild(controlText);

  // Setup click-event listener: simply set the map to Suwon

  google.maps.event.addDomListener(controlUI, 'click', function() {

    map.setCenter(suwon, 37.250943, 127.028344)

  });

}

function initMap() {

  var seoul = { lat: 37.5642135 ,lng: 127.0016985 };

  map = new google.maps.Map(

document.getElementById('googlemap'), {

  zoom: 12,

  center: seoul,

  disableDefaultUI:true

});

  // Create a DIV to hold the control and call HomeControl()

  var homeControlDiv = document.createElement('div');

  var homeControl = new HomeControl(homeControlDiv, map);

  //  homeControlDiv.index = 1;

  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);

}