HTML5 Geolocation API를 사용하면 사용자가 자신의 위치 정보를 웹사이트와 공유할 수 있습니다. JavaScript로 위도(latitude)와 경도(longitude) 값을 받아 백엔드 웹 서버로 전송하면, 주변 상점 검색이나 지도에 현재 위치 표시하기 같은 다양한 위치 기반 기능을 구현할 수 있습니다.
Geolocation API는 전역 navigator 객체의 새로운 속성인 geolocation 객체를 통해 동작합니다. 이 객체는 위치 정보 관련 메서드를 제공하며, 보안상의 이유로 반드시 HTTPS 환경에서만 작동하고 사용자가 브라우저에서 위치 접근 권한을 허용해야 합니다.
Geolocation 객체의 주요 메서드
- getCurrentPosition(): 현재 위치를 한 번만 가져옵니다.
- watchPosition(): 위치가 변경될 때마다 지속적으로 업데이트를 받습니다.
- clearWatch(): watchPosition()으로 시작한 위치 추적을 중지합니다.
예제 코드
다음 코드를 실행하면 Geolocation API를 통해 현재 위치의 위도와 경도 좌표를 확인할 수 있습니다. 버튼을 클릭하면 위치 정보를 요청하고, 성공 시 좌표를 알림 창으로 표시하며, 오류 발생 시 상황에 맞는 에러 메시지를 보여줍니다.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
} else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition
(showLocation, errorHandler, options);
} else{
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="getLocation();" value="Get Location"/>
</form>
</body>
</html>코드 설명
1. 성공 콜백 함수 — showLocation()
위치 조회에 성공하면 position.coords.latitude와 position.coords.longitude를 통해 위도와 경도 값을 얻을 수 있습니다. 여기서는 간단히 alert()로 결과를 출력하지만, 실제 프로젝트에서는 이 값을 서버로 전송하거나 지도 API(예: Google Maps, Kakao Map)에 연동해 활용합니다.
2. 오류 콜백 함수 — errorHandler()
위치 조회 중 문제가 발생하면 오류 코드에 따라 적절한 메시지를 표시합니다. 주요 오류 코드는 다음과 같습니다.
- err.code == 1 (PERMISSION_DENIED): 사용자가 위치 접근 권한을 거부한 경우
- err.code == 2 (POSITION_UNAVAILABLE): 위치 정보를 확인할 수 없는 경우
- err.code == 3 (TIMEOUT): 설정된 제한 시간 내에 위치를 가져오지 못한 경우
3. 옵션 객체 — options
예제에서는 {timeout: 60000} 옵션을 사용해 위치 조회 제한 시간을 60초로 설정했습니다. 그 외에도 enableHighAccuracy(고정밀 위치 사용 여부)와 maximumAge(캐시된 위치 정보의 최대 유효 시간) 옵션을 함께 사용할 수 있습니다.
브라우저 호환성 확인
예제의 if(navigator.geolocation) 조건문처럼, Geolocation API를 사용하기 전에 해당 브라우저가 기능을 지원하는지 먼저 확인하는 것이 좋습니다. 모든 최신 브라우저(Chrome, Firefox, Safari, Edge 등)는 Geolocation API를 지원하지만, 구형 브라우저나 비보안(HTTP) 환경에서는 동작하지 않을 수 있습니다.