웹프로그래밍

본문 바로가기
사이트 내 전체검색


웹프로그래밍
웹프로그래밍

4. Google Maps Controls

페이지 정보

작성자 관리자 댓글 0건 조회 821회 작성일 21-06-29 12:26

본문

4. Google Maps Controls

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);


}



댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.