[javascript] 지도에서 GPS 기능 활용하기

22 Nov 2023

javascript

지도 애플리케이션은 GPS (Global Positioning System) 기능을 활용하여 사용자의 위치를 추적하고 표시하는 데 매우 유용합니다. 이 글에서는 JavaScript를 사용하여 지도에서 GPS 기능을 활용하는 방법에 대해 알아보겠습니다.

1. HTML에서 Google Maps API를 로드하기

지도를 표시하기 위해 먼저 Google Maps API를 HTML에 로드해야 합니다. HTML <head> 태그 내에 아래와 같은 코드를 추가하세요.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

여기서 YOUR_API_KEY 부분은 Google Cloud Platform에서 생성한 API 키를 입력해야 합니다.

2. JavaScript에서 맵 초기화하기

다음으로 JavaScript 코드를 사용하여 맵을 초기화하는 함수 initMap을 작성합니다. 이 함수는 맵을 생성하고 사용자의 위치를 추적합니다. 아래는 예제 코드입니다.

function initMap() {
  // 맵 생성
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15
  });
  
  // 사용자의 위치 추적
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      
      // 사용자의 위치에 마커 추가
      var marker = new google.maps.Marker({
        position: pos,
        map: map,
        title: '현재 위치'
      });
      
      // 사용자의 위치로 지도 중심 이동
      map.setCenter(pos);
    }, function() {
      // 위치 추적에 실패한 경우
      handleLocationError(true, map.getCenter());
    });
  } else {
    // 브라우저에서 위치 추적을 지원하지 않는 경우
    handleLocationError(false, map.getCenter());
  }
}

위 코드에서 map은 맵 객체를 나타내며, new google.maps.Map()으로 생성됩니다. zoom 값은 초기 확대 수준을 나타냅니다.

navigator.geolocation을 사용하여 브라우저에서 사용자의 위치 정보를 얻을 수 있습니다. 위치 정보를 성공적으로 얻은 경우 getCurrentPosition 콜백 함수 안에서 위치 정보를 기반으로 마커를 추가하고 지도의 중심을 이동시킵니다.

위치 정보를 얻을 수 없거나 브라우저에서 위치 추적을 지원하지 않는 경우 handleLocationError 함수를 호출하여 오류를 처리합니다.

3. HTML에 지도 표시하기

마지막으로, HTML 파일의 <body> 태그에 지도를 표시할 <div> 요소를 추가합니다.

<div id="map"></div>

위 코드에서 id 값이 map인 요소가 맵이 표시될 영역입니다.

결론

이제 지도에서 GPS 기능을 활용하는 기본적인 방법을 알아봤습니다. JavaScript를 사용하여 맵을 초기화하고 사용자의 위치를 표시하는 등 다양한 기능을 추가할 수 있습니다. Google Maps API의 다양한 기능과 옵션을 참조하여 더욱 다양하고 유용한 지도 애플리케이션을 개발해보세요.

참고 자료

Google Maps JavaScript API