구글 지도에 HTML5 지리적 위치 정확도를 시각화하는 방법

HTML5 지리적 위치 정확도를 구글 지도에 표시하기

HTML5 Geolocation API는 사용자의 현재 위치(위도·경도)뿐만 아니라 해당 위치가 얼마나 신뢰할 수 있는지를 나타내는 정확도(accuracy) 값까지 함께 제공합니다. 이 정확도 값은 미터 단위로 표시되며, 값이 작을수록 위치 측정이 더 정밀하다는 의미입니다.

이 정보를 구글 지도에서 가장 직관적으로 표현하는 방법은 두 가지 요소를 조합하는 것입니다.

• 마커(Marker): 측정된 중심 좌표를 점으로 표시
• 원(Circle): 정확도 값을 반지름으로 하여 오차 범위를 시각적으로 표현

아래는 이를 구현한 완전한 코드 예제입니다.

function showLocation(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  var accuracy = position.coords.accuracy;

  var center = new google.maps.LatLng(lat, lng);

  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 15,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // 현재 위치를 나타내는 마커
  var marker = new google.maps.Marker({
    position: center,
    map: map,
    title: "현재 위치"
  });

  // 정확도(오차 반경)를 나타내는 원
  var accuracyCircle = new google.maps.Circle({
    center: center,
    radius: accuracy,
    map: map,
    fillColor: "#4285F4",
    fillOpacity: 0.2,
    strokeColor: "#4285F4",
    strokeOpacity: 0.8,
    strokeWeight: 1
  });

  // 원 전체가 화면에 보이도록 지도 범위 자동 조정
  map.fitBounds(accuracyCircle.getBounds());
}

navigator.geolocation.getCurrentPosition(showLocation);

코드 핵심 설명

1. 위치 데이터 추출
getCurrentPosition() 콜백으로 전달되는 position 객체에서 위도(coords.latitude), 경도(coords.longitude), 정확도(coords.accuracy) 세 가지 값을 가져옵니다.

2. 마커 생성
google.maps.Marker를 사용해 측정된 좌표에 핀을 표시합니다. 이것이 사용자의 '추정 위치' 중심점입니다.

3. 정확도 원 그리기
google.maps.Circle의 radius 속성에 정확도 값을 미터 단위로 그대로 넣으면, 실제 오차 범위가 원으로 표현됩니다. fillOpacity를 낮게 설정하면 지도 아래가 비쳐 보여 가독성이 좋습니다.

4. 지도 범위 자동 맞춤
map.fitBounds(circle.getBounds())를 호출하면 원 전체가 화면 안에 들어오도록 줌 레벨이 자동으로 조정됩니다. 정확도가 낮아 원이 클 경우에도 유용합니다.

참고 사항

정확도 값은 GPS, Wi-Fi, IP 기반 측정 방식에 따라 수 미터에서 수 킬로미터까지 크게 달라질 수 있습니다. HTTPS 환경에서만 Geolocation API가 동작하며, 사용자의 위치 권한 허용이 필요하다는 점도 유의해야 합니다.