[javascript] 지도에서 특정 위치의 거리 측정하기

22 Nov 2023

javascript

자바스크립트를 사용하여 지도에서 특정 위치의 거리를 측정하는 방법을 알아보겠습니다. 이를 위해 사용할 수 있는 Google Maps JavaScript API를 사용하겠습니다.

Google Maps JavaScript API 키 발급하기

먼저, Google Maps JavaScript API를 사용하기 위해서는 API 키가 필요합니다. 다음 단계를 따라서 API 키를 발급해보세요.

Google Cloud Console에 접속합니다.
새 프로젝트를 생성하거나 기존 프로젝트를 선택합니다.
좌측 메뉴에서 “API 및 서비스” > “관리”를 선택합니다.
“API 및 서비스 라이브러리”로 이동한 후 “Google Maps JavaScript API”를 검색하여 활성화합니다.
다시 좌측 메뉴에서 “API 및 서비스” > “사용자 인증 정보”를 선택합니다.
“사용자 인증 정보 만들기” 버튼을 클릭하고 API 키를 선택합니다.
API 키를 확인하고 필요한 경우 제한을 설정합니다.

자바스크립트 코드

이제, Google Maps JavaScript API 키를 발급했으니 거리를 측정할 위치를 표시할 수 있는 자바스크립트 코드를 작성해보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>지도에서 특정 위치의 거리 측정하기</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <script>
        let map;

        function initMap() {
            // 지도 초기화
            map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 37.5665, lng: 126.9780 },
                zoom: 12,
            });

            // 거리 측정할 위치 표시
            const marker1 = new google.maps.Marker({
                position: { lat: 37.5665, lng: 126.9780 },
                map,
                title: "특정 위치 1",
            });

            const marker2 = new google.maps.Marker({
                position: { lat: 37.5660, lng: 127.0016 },
                map,
                title: "특정 위치 2",
            });

            // 거리 측정 객체 생성
            const distanceService = new google.maps.DistanceMatrixService();

            // 거리 측정 요청
            distanceService.getDistanceMatrix(
                {
                    origins: [{ lat: 37.5665, lng: 126.9780 }],
                    destinations: [{ lat: 37.5660, lng: 127.0016 }],
                    travelMode: google.maps.TravelMode.DRIVING,
                },
                (response, status) => {
                    if (status === "OK") {
                        const distance = response.rows[0].elements[0].distance.text;
                        alert("거리: " + distance);
                    } else {
                        alert("거리 측정에 실패하였습니다.");
                    }
                }
            );
        }
    </script>
</head>
<body>
    <div id="map" style="width: 400px; height: 300px;"></div>
</body>
</html>

위 코드에서 YOUR_API_KEY 부분에 발급받은 Google Maps JavaScript API 키를 입력해야 합니다.

위 코드를 HTML 파일에 복사하여 실행하면, 지도가 표시되고 특정 위치 1과 특정 위치 2라는 2개의 마커가 표시됩니다. 그리고 거리 측정 결과가 경고창으로 표시됩니다.

이제 지도에서 원하는 위치의 거리를 측정할 수 있습니다.

결론

이번 글에서는 자바스크립트를 사용하여 지도에서 특정 위치의 거리를 측정하는 방법을 알아보았습니다. Google Maps JavaScript API를 활용하여 다양한 위치들의 거리를 간단히 측정할 수 있습니다.

참고 자료: