스케일바는 웹 지도에 사용자에게 현재 확대 수준을 보여주는 유용한 기능입니다. 이 문서에서는 JavaScript를 사용하여 지도에 스케일바를 추가하는 방법을 알아보겠습니다.

Google Maps API 사용하기

Google Maps API를 사용하여 스케일바를 지도에 추가할 수 있습니다. 먼저 Google Maps JavaScript API를 활성화한 후, API 키를 발급받아야 합니다.

<!-- Google Maps API 스크립트 가져오기 -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

스케일바 추가하기

지도에 스케일바를 추가하기 위해 다음과 같은 단계를 따릅니다.

1. 지도 객체를 생성합니다.
2. ScaleControlOptions를 사용하여 스케일바 옵션을 설정합니다.
3. ScaleControl을 사용하여 스케일바를 지도에 추가합니다.

// 스케일바를 추가할 지도 객체 생성
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: {lat: 37.5665, lng: 126.9780} // 서울의 위도와 경도
});

// 스케일바 옵션 설정
var scaleControlOptions = {
  position: google.maps.ControlPosition.BOTTOM_LEFT, // 스케일바 위치 설정
};

// 스케일바 추가
var scaleControl = new google.maps.ScaleControl(scaleControlOptions);
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(scaleControl);

위 코드에서 #map은 스케일바를 추가할 지도의 HTML 요소 ID입니다. 스케일바를 적절한 위치에 추가하려면 position 속성을 수정하면 됩니다.

마무리

이제 JavaScript를 사용하여 지도에 스케일바를 추가하는 방법을 알게 되었습니다. 이 기능을 활용하여 웹 지도의 사용자 경험을 향상시킬 수 있습니다.

더 자세한 내용은 Google Maps JavaScript API 문서를 참조하십시오.