[javascript] 지도에서 다른 위치를 선택하여 경로 표시하기
지도 애플리케이션을 개발할 때 종종 사용자의 현재 위치에서 다른 위치로 경로를 표시해야 할 때가 있습니다. 이를 위해 대부분의 지도 API는 경로 표시 기능을 제공합니다. 이번에는 자바스크립트를 사용하여 지도에서 다른 위치를 선택하고 경로를 표시하는 방법을 알아보겠습니다.
API 선택
우선, 사용할 지도 API를 선택해야 합니다. 현재 인기있는 지도 API 중 몇 가지가 있습니다.
- Google Maps API: 가장 인기 있는 지도 API로, 다양한 서비스와 기능을 제공합니다.
- Naver Maps API: 한국에서 많이 사용되는 네이버의 지도 API입니다.
- Kakao Maps API: 카카오가 제공하는 지도 API로, 한국어 문서와 편리한 사용법이 특징입니다.
이 문서에서는 Google Maps API를 사용하여 예제를 작성하겠습니다.
개발 환경 설정
- Google Maps API 키 발급: Google Cloud 콘솔에서 API 키를 발급받아야 합니다. API 키는 요청 제한과 비용 청구를 위해 사용됩니다.
- 자바스크립트 파일 링크: HTML 파일에 다음과 같이 자바스크립트 파일을 링크합니다.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
마커 추가 및 클릭 이벤트 처리
가장 먼저 지도에 마커를 추가하고 클릭 이벤트를 처리해야 합니다. 사용자가 마커를 클릭할 때마다 해당 마커를 시작점으로 경로를 표시하기 위해 클릭 이벤트 리스너를 추가합니다.
var map;
var directionsService;
var directionsRenderer;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.5665, lng: 126.9780 },
zoom: 12,
});
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
// 마커 클릭 이벤트 리스너 추가
google.maps.event.addListener(map, "click", function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
// 마커 클릭 이벤트 처리
google.maps.event.addListener(marker, "click", function() {
calculateRoute(marker.getPosition());
});
}
function calculateRoute(destination) {
var start = map.getCenter();
var request = {
origin: start,
destination: destination,
travelMode: 'DRIVING'
};
directionsService.route(request, function(result, status) {
if (status == 'OK') {
directionsRenderer.setDirections(result);
}
});
}
HTML 마크업
마지막으로, HTML 파일에 지도를 표시할 요소와 컨트롤을 추가해야 합니다. 지도를 표시할 <div> 요소와 경로를 그릴 때 사용할 컨트롤을 추가합니다.
<div id="map"></div>
실행
이제 모든 준비가 끝났습니다. 지도를 실행하고 원하는 위치를 클릭하면 해당 위치로 경로가 표시됩니다.
위의 예제 코드를 사용하여, 지도에서 다른 위치를 선택하여 경로를 표시해보세요!