HTML5 Geolocation API로 위도·경도 좌표를 가져오는 방법

HTML5 Geolocation으로 위도와 경도 구하기

HTML5 Geolocation API 또는 Google API를 활용해 현재 위치의 위도(latitude)와 경도(longitude)를 얻으려면, 브라우저에서 제공하는 Geolocation 객체를 JavaScript로 호출해야 합니다.

핵심은 navigator.geolocation.getCurrentPosition() 메서드입니다. 이 메서드는 성공 콜백 함수와 실패(오류) 콜백 함수를 인자로 받으며, 위치 정보 조회에 성공하면 좌표 데이터가 담긴 객체를 반환하고 실패하면 별도의 오류 메시지를 표시합니다.

기본 사용 예제

if (navigator.geolocation) {
    /* 위치 조회 성공 시 successFunc 실행,
    실패 시 errorFunc에서 오류 메시지 표시 */
    navigator.geolocation.getCurrentPosition(successFunc, errorFunc);
} else {
    alert('브라우저에서 위치 정보 기능이 지원되지 않습니다.
최신 브라우저를 사용해 주세요.');
}

성공 및 오류 콜백 함수 작성하기

실제 좌표 값을 활용하려면 아래처럼 콜백 함수를 함께 정의해야 합니다.

function successFunc(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    console.log('위도: ' + lat + ', 경도: ' + lng);
}

function errorFunc(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            alert('사용자가 위치 정보 요청을 거부했습니다.');
            break;
        case error.POSITION_UNAVAILABLE:
            alert('현재 위치 정보를 사용할 수 없습니다.');
            break;
        case error.TIMEOUT:
            alert('위치 요청 시간이 초과되었습니다.');
            break;
        default:
            alert('알 수 없는 오류가 발생했습니다.');
    }
}

주소로 좌표를 찾고 싶다면?

현재 위치가 아니라 특정 주소 문자열을 위도·경도로 변환해야 하는 경우에는 Google Maps Platform에서 제공하는 Geocoding API를 사용하는 것이 좋습니다. 주소를 요청 파라미터로 전달하면 해당 지점의 좌표를 JSON 형태로 응답받을 수 있습니다.

또한 Geolocation API는 보안상의 이유로 HTTPS 환경에서만 동작하며, 사용자가 브라우저에서 위치 권한을 허용해야 한다는 점도 반드시 기억해 두세요.