[javascript] 지도에서 실시간 위치 추적하기

22 Nov 2023

javascript

소개

지도에서 실시간으로 위치를 추적하는 기능은 많은 웹 애플리케이션에서 사용되는 중요한 기능입니다. 이 기능을 통해 사용자의 실시간 위치를 확인하거나, 동시에 여러 사용자의 위치를 보여주는 등 다양한 목적으로 활용할 수 있습니다.

기술 스택

이 기능을 구현하기 위해 일반적으로 JavaScript와 HTML5 Geolocation API를 사용합니다. JavaScript는 클라이언트 측에서 동작하는 스크립트 언어이며, HTML5 Geolocation API는 실시간 위치 정보를 가져오는 데 사용됩니다.

코드 예시

아래는 JavaScript를 사용하여 지도에서 실시간 위치를 추적하는 예시 코드입니다.

// HTML 파일에서 지도를 표시할 div 요소 가져오기
const mapElement = document.getElementById('map');

// 사용자 위치를 실시간으로 추적하는 함수
function trackLocation() {
  if (navigator.geolocation) {
    // 위치 추적 허용 여부 확인
    navigator.geolocation.watchPosition(
      (position) => {
        // 위치 정보 가져오기 성공시 동작할 코드
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        // 지도에 위치 표시하기
        const mapOptions = {
          center: { lat: latitude, lng: longitude },
          zoom: 15,
        };
        const map = new google.maps.Map(mapElement, mapOptions);
        const marker = new google.maps.Marker({
          position: { lat: latitude, lng: longitude },
          map: map,
        });
      },
      (error) => {
        // 위치 정보 가져오기 실패시 동작할 코드
        console.error(error);
      }
    );
  } else {
    alert('Geolocation is not supported by this browser.');
  }
}

// 페이지 로드 시 위치 추적 시작
window.onload = () => {
  trackLocation();
};

위의 코드에서 mapElement는 HTML 파일에서 지도를 표시할 div 요소의 id를 가져오는 부분입니다. trackLocation 함수는 navigator.geolocation.watchPosition을 사용하여 위치 정보를 실시간으로 추적합니다. 위치 정보 가져오기 성공 시에는 Google Maps API를 사용하여 위치를 지도에 표시합니다.

참고 자료

위의 예시 코드는 JavaScript와 HTML5 Geolocation API를 통해 지도에서 실시간 위치를 추적하는 기능을 구현하는 방법을 보여줍니다. 이를 활용하여 사용자의 실시간 위치를 확인하거나 다양한 웹 애플리케이션에서 활용할 수 있습니다.