[HTML] Geolocation

HTML5 API

HTML5에서 새롭게 추가된 API는 모두 자바스크립트로 구현되어 있다.

geolocation API

geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API다.

사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송된다.

 

이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있다.

하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있다.

getCurrentPosition() 메소드

getCurrentPosition() 메소드를 이용하면 사용자의 위치에 대한 위도와 경도값을 얻을 수 있다.

이 메소드의 첫 번째 인수로는 가져온 사용자의 위치 정보를 출력하는 함수가 들어간다.

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

 

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

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

function showYourLocation(position) {
	loc.innerHTML = "현재 사용자는 위도 " + position.coords.latitude + ", 경도 " + position.coords.longitude + "에 위치하고 있다.";	
}

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+"'>";
}

<h1>구글 맵을 통한 사용자의 위치 표시</h1>

<button onclick="findLocation()">사용자의 위치 표시</button>
<p id="myLocation"></p>
<div id="mapLocation"></div>

<script>
    var loc = document.getElementById("myLocation");
    function findLocation() {
        if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(showYourLocation, showErrorMsg);
		} else { 
			loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타난다.";
		}
	}

    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 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;
    	}
    }
</script>

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

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	위치 정보를 가져온 시간을 나타냄.