HTML5 Geolocation API란?
HTML5 Geolocation API를 사용하면 자주 찾는 웹사이트와 자신의 위치 정보를 손쉽게 공유할 수 있습니다. 자바스크립트로 위도와 경도 값을 받아 백엔드 웹 서버로 전송하면, 주변 상점 검색이나 지도 위에 내 위치 표시하기 같은 다양한 위치 기반 기능을 구현할 수 있습니다. Geolocation 좌표는 해당 기기의 지리적 위치를 정확하게 나타냅니다.
getCurrentPosition() 메서드 이해하기
Geolocation의 getCurrentPosition() 메서드는 위치 정보를 가져오는 콜백 함수를 지정합니다. 이 메서드는 비동기적으로 호출되며, 완전한 위치 정보를 담고 있는 Position 객체를 콜백 함수에 전달합니다.
이 글에서는 getCurrentPosition() 메서드를 사용해 보겠습니다. HTML5 Geolocation과 구글 지도로 현재 위치를 가져오려면 먼저 Google Static Maps API용 API 키를 발급받아야 합니다.
구글 지도 API 키 발급받기
https://console.developers.google.com에 접속하여 구글 지도 무료 API 키를 발급받으세요. 발급받은 키를 코드에 추가하면 Geolocation 기능과 함께 사용할 수 있습니다.
예제 코드
다음 예제 코드를 실행하면 HTML5 Geolocation과 구글 지도로 현재 위치를 확인할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var latlongvalue = position.coords.latitude + ","
+ position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
+latlongvalue+"&zoom=14&size=400x300&key
=AIzaSyAa8HeLH2lQMbPeOiMlM9D1VxZ7pbGQq8o";
document.getElementById("mapholder").innerHTML =
"<img src='"+img_url+"'>";
}
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>
<div id="mapholder"></div>
<form>
<input type="button" onclick="getLocation();" value="Get Location"/>
</form>
</body>
</html>코드 동작 원리
위 예제의 핵심 흐름은 다음과 같습니다.
1. showLocation() 함수: 위치 조회에 성공하면 호출됩니다. Position 객체에서 위도(latitude)와 경도(longitude) 값을 추출하고, 이를 조합해 Google Static Maps API 요청 URL을 만든 뒤 지도 이미지를 화면에 출력합니다.
2. errorHandler() 함수: 오류가 발생했을 때 호출됩니다. 에러 코드 1은 접근 거부(사용자가 위치 공유를 거부한 경우), 에러 코드 2는 위치 정보를 가져올 수 없는 경우를 의미하며, 각 상황에 맞는 경고창을 표시합니다.
3. getLocation() 함수: 버튼 클릭 시 실행되며, 브라우저가 Geolocation을 지원하는지 확인한 후 타임아웃 60초 옵션과 함께 getCurrentPosition()을 호출합니다. 지원하지 않는 브라우저라면 안내 메시지를 보여줍니다.