Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

구글 지도에서 HTML5 Geolocation API로 현재 위치 표시하는 방법

HTML5 Geolocation API는 방문 중인 웹사이트와 자신의 위치 정보를 공유할 수 있도록 해주는 브라우저 내장 기능입니다. 자바스크립트(JavaScript)를 활용하면 기기의 위도(latitude)와 경도(longitude)를 손쉽게 확인할 수 있으며, 이 값을 백엔드 웹 서버로 전송해 주변 상점 검색, 지도에 내 위치 표시하기 등 다양한 위치 기반(location-aware) 기능을 구현할 수 있습니다.

Geolocation 좌표는 해당 기기의 지리적 위치를 나타냅니다. 이 글에서는 getCurrentPosition() 메서드를 사용해 현재 위치를 가져오고, 이를 구글 지도(Google Maps)와 연동하는 방법을 단계별로 살펴보겠습니다.

1단계: 구글 지도 API 키 발급받기

HTML5 Geolocation과 함께 구글 지도를 사용하려면 먼저 Google Static Maps API 키가 필요합니다. 발급 절차는 다음과 같습니다.

  1. Google Developers Console에 접속합니다.
  2. 새 프로젝트를 생성하고 Static Maps API를 활성화합니다.
  3. 무료 API 키를 발급받습니다.
  4. 발급받은 키를 예제 코드의 key 파라미터 값에 넣어줍니다.

구글 지도에서 HTML5 Geolocation API로 현재 위치 표시하는 방법

2단계: 전체 예제 코드

아래 코드를 실행한 뒤 버튼을 클릭하면, 현재 위치를 가져와 구글 정적 지도(Static Map) 이미지로 화면에 표시합니다.

<!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="Your Location"/>
      </form>
   </body>
</html>

3단계: 코드 동작 원리 이해하기

showLocation(position) — 성공 콜백 함수

위치 조회에 성공하면 호출되는 함수입니다. position.coords 객체에서 위도와 경도 값을 추출한 뒤 두 값을 조합하여 구글 정적 지도 이미지 URL을 생성하고, mapholder 영역에 지도를 출력합니다. zoom=14는 지도 확대 수준, size=400x300은 이미지 크기를 의미하며 필요에 따라 조절할 수 있습니다.

errorHandler(err) — 오류 처리 함수

오류가 발생하면 에러 코드에 따라 다른 메시지를 표시합니다. 코드 1은 사용자가 위치 권한을 거부한 경우(Access denied), 코드 2는 위치 정보를 가져올 수 없는 경우(Position unavailable)를 의미합니다.

getLocation() — 위치 요청 함수

먼저 navigator.geolocation으로 브라우저의 Geolocation 지원 여부를 확인합니다. 지원한다면 타임아웃 60초 옵션과 함께 getCurrentPosition()을 호출하고, 미지원 브라우저라면 경고창을 띄웁니다.

마무리 및 참고 사항

이처럼 HTML5 Geolocation API와 구글 정적 지도만으로 몇십 줄의 코드로 현재 위치 표시 기능을 만들 수 있습니다. 실제 서비스에 적용할 때는 반드시 본인이 발급한 API 키를 사용하고, 키 노출을 막기 위해 도메인 제한(리퍼러 제한)을 설정하는 것이 좋습니다. 또한 위치 정보는 개인정보에 해당하므로 HTTPS 환경에서 동작하며, 사용자의 명시적인 권한 허용이 있어야만 좌표를 얻을 수 있다는 점도 기억하세요.