HTML5를 이용하여 위치정보(GPS)를 이용하자

HTML5에서는 GPS 수신기기를 탑재한 스마트폰의 위치정보를 javascript를 통해 쉽게 이용할 수 있도록 하고 있습니다. 단순한 2개의 실수값(위도, 경도)이지만 위치정보는 매우 민감한 개인정보 중 하나이므로 웹페이지에서 이 기능을 사용할경우 브라우저는 사용자에게 위치정보 제공 여부를 선택할 수 있습니다.

HTML5 Geolocation은 IE9, 파이어폭스, 크롬 등 대부분의 브라우저에서 지원하고 있습니다.

1. 위치정보 가져오기

-위치정보를 가져오기 위해서는 getCurrentPosition() 함수를 사용하면 됩니다.

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

2. 에러 처리

-위의 예에서 getCurrentPosition의 첫 번째 매개변수로 showPosition가 들어가 있습니다. 이 함수의 두 번째 매개변수는 에러 처리를 위한 것입니다. 매개변수로 showError를 넣고 아래의 함수를 추가시켜 봅시다.

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."//사용자가 위치정보에 대한 요청을 거부했을 때.
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable." //위치정보 사용이 불가능할 때(주로 PC에서 볼 때)
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out." //시간초과
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred." //알 수 없는 에러
      break;
    }
  }

3. 위도와 경도로 지도를 보여주자.

-아무래도 사용자 근처에 무엇이 있는지를 보여주는게 주요한 용도 중 하나겠죠? 구글의 API를 이용하여봅시다.

여기서는 좌표를 주면 이미지를 보여주는 형태를 보여드리도록 하겠습니다. showPosition을 수정하시면 됩니다.

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude; //좌표를 "위도,경도" 형태로 만들어

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false"; //googleapi에 전달하여 이미지를 얻어온다.

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}