[javascript] 지도에서 사용자 위치 트래킹하기

22 Nov 2023

javascript

지도 애플리케이션에서 사용자의 위치를 실시간으로 트래킹하는 것은 매우 유용합니다. 이를 통해 사용자의 위치를 기반으로 다양한 기능을 제공할 수 있습니다. 이번 블로그 포스트에서는 JavaScript를 사용하여 지도에서 사용자의 위치를 트래킹하는 방법을 알아보겠습니다.

1. Geolocation API 사용하기

먼저, Geolocation API를 사용하여 사용자의 위치를 가져올 수 있습니다. 이 API는 브라우저에서 제공되는 기능으로, 사용자의 위치 정보를 얻을 수 있습니다.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    
    // 위치 정보를 기반으로 지도에 마커 표시하기 등의 작업 수행
  });
} else {
  alert('Geolocation is not supported by this browser.');
}

위의 코드는 navigator.geolocation 객체를 사용하여 사용자의 현재 위치를 가져오고, 가져온 위치 정보를 활용하여 지도에 마커를 표시하는 등의 작업을 수행하는 예시입니다.

2. 지도 API와 연동하기

위에서 얻은 사용자의 위치 정보를 바탕으로 지도를 표시하기 위해서는 지도 API와 연동해야 합니다. 대표적인 예로 Google Maps API를 사용하는 방법을 살펴보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>지도 트래킹 예시</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>지도 트래킹 예시</h1>
    <div id="map"></div>
    <script>
      function initMap() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            
            // 가져온 위치 정보를 바탕으로 지도 생성 및 마커 생성
            var map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: latitude, lng: longitude},
              zoom: 15
            });
            
            var marker = new google.maps.Marker({
              position: {lat: latitude, lng: longitude},
              map: map
            });
          });
        } else {
          alert('Geolocation is not supported by this browser.');
        }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  </body>
</html>

위의 코드는 HTML 파일 내에서 Google Maps API를 로드하고, initMap 함수에서 위치 정보를 가져와 지도를 생성하고 마커를 추가하는 예시입니다. YOUR_API_KEY 부분을 발급받은 Google Maps API 키로 대체하셔야 합니다.

결론

이번 포스트에서는 JavaScript의 Geolocation API를 사용하여 지도에서 사용자의 위치를 트래킹하는 방법을 살펴보았습니다. 사용자의 위치 정보를 활용하여 다양한 기능을 구현할 수 있으니, 지도 애플리케이션 개발에 활용해보시기 바랍니다.

1. Geolocation API 사용하기

2. 지도 API와 연동하기

결론

참고 자료