HTML 입문 | HTML5 API | Geolocation

HTML5 API

HTML5에서 새롭게 추가된 API는 모두 자바스크립트로 구현되어 있다. 그러므로 본 내용을 이해하기 위해서는 자바스크립트에 대한 기초 지식이 필요하다.

geolocation API

geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API이다. 사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송된다.

이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있다. 하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있다.

geolocation API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

API ie chrome firefox safari opera
geolocation 9.0 5.0 - 49.0 (http) / 50.0 (https) 3.5 5.0 16.0

크롬 50.0 버전부터는 https와 같은 보안 프로토콜에서만 geolocation API가 동작하도록 허용하고 있다.

getCurrentPosition() 메소드

getCurrentPosition() 메소드를 이용하면 사용자의 위치에 대한 위도와 경도값을 얻을 수 있다. 이 메소드의 첫 번째 인수로는 가져온 사용자의 위치 정보를 출력하는 함수가 들어간다.

예제

function findLocation() {
    if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(showYourLocation); 
    } else { 
        loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!"; 
    }
}

이 메소드의 두 번째 인수로는 위치 정보에 관한 오류를 처리하는 함수가 들어간다.

예제

function showErrorMsg(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
        loc.innerHTML = "이 문장은 사용자가 Geolocation API의 사용 요청을 거부했을 때 나타납니다!"
        break;
        case error.POSITION_UNAVAILABLE:
        loc.innerHTML = "이 문장은 가져온 위치 정보를 사용할 수 없을 때 나타납니다!"
        break;
        case error.TIMEOUT:
        loc.innerHTML = "이 문장은 위치 정보를 가져오기 위한 요청이 허용 시간을 초과했을 때 나타납니다!"
        break;
        case error.UNKNOWN_ERROR:
        loc.innerHTML = "이 문장은 알 수 없는 오류가 발생했을 때 나타납니다!"
        break;
    }
}

이처럼 가져온 사용자의 위치 정보를 구글 맵을 통해 표시할 수 있다.

예제

function showYourLocation(position) {
    var userLat = position.coords.latitude;
    var userLng = position.coords.longitude;
    var imgUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" + userLat + "," + userLng + "&zoom=15&size=500x400&sensor=false";
    document.getElementById("mapLocation").innerHTML = "<img src='"+imgUrl+"'>";
}

위의 예제처럼 단순한 이미지로 표시하는 것이 아닌 구글 맵 스크립트를 이용한 연동도 가능하다.

예제

function showYourLocation(position) {
    var userLat = position.coords.latitude;
    var userLng = position.coords.longitude;
    var userLocation = new google.maps.LatLng(userLat, userLng);
    loc = document.getElementById("mapLocation");
    loc.style.width = '500px';
    loc.style.height = '400px';
    var mapOptions = { 
        center: userLocation, 
        zoom: 15, 
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false, 
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL} 
    }
    var map = new google.maps.Map(loc, mapOptions);
    var marker = new google.maps.Marker({position:userLocation,map:map,title:"여기가 현재 위치입니다!"});
}

Geolocation API 메소드

Method 설명
getCurrentPosition() 사용자의 현재 위치를 가져옴.
watchPosition() 사용자의 현재 위치를 가져오고 나서, 사용자의 움직임에 따라 지속적으로 위치 정보를 갱신함.
clearWatch() watchPosition() 메소드의 실행을 중지함.

getCurrentPosition() 메소드의 반환값

속성 반환값
coords.latitude 소수로 표현된 위도 값
coords.longitude 소수로 표현된 경도 값
coords.accuracy 위도 값과 경도 값의 정확도
coords.altitude 평균 해수면을 기준으로 하는 고도 값(해발)
coords.altitudeAccuracy 고도 값의 정확도
coords.heading 북쪽을 기준으로 현재 진행 방향에 대한 시계방향으로의 각도 값(˚)
coords.speed 초당 이동한 미터 수를 나타내는 속도 값(초속)
timestamp 위치 정보를 가져온 시간을 나타냄.



최종 수정 : 2021-08-27