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

HTML5와 Google Maps API로 좌표를 장소 이름으로 변환하는 방법

웹 애플리케이션에서 위도와 경도 같은 좌표 값을 실제 주소나 장소 이름으로 바꾸고 싶다면 Google Maps API의 역지오코딩(Reverse Geocoding) 기능을 활용하면 됩니다.

지오코딩과 역지오코딩의 차이

지오코딩(Geocoding)은 사람이 읽을 수 있는 주소를 지도상의 위치, 즉 위도와 경도 좌표로 변환하는 과정입니다.

반대로 역지오코딩(Reverse Geocoding)은 지도상의 특정 위치 좌표를 사람이 이해할 수 있는 주소 형태로 변환하는 과정을 말합니다.

지도 초기화 예제

먼저 Google Maps API를 사용해 지도를 초기화하고 중심 좌표를 설정하는 방법부터 살펴보겠습니다.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {lat: 20.502, lng: -22.765}
    });
}

위 코드에서 zoom: 8은 지도의 확대 수준을, center는 지도가 처음 표시될 때 중심이 되는 위도(lat)와 경도(lng) 값을 의미합니다.

역지오코딩으로 주소 얻기

좌표를 주소로 변환하려면 google.maps.Geocoder 객체를 사용합니다. 다음은 특정 좌표를 전달하여 장소 이름을 가져오는 예제입니다.

var geocoder = new google.maps.Geocoder();
var latlng = { lat: 20.502, lng: -22.765 };

geocoder.geocode({ location: latlng }, function(results, status) {
    if (status === 'OK') {
        if (results[0]) {
            console.log(results[0].formatted_address);
        } else {
            console.log('결과를 찾을 수 없습니다.');
        }
    } else {
        console.log('지오코더 실패: ' + status);
    }
});

역지오코더는 단순히 하나의 주소만 반환하지 않습니다. 요청된 좌표에 대해 다음과 같은 다양한 수준의 결과를 매칭하여 제공합니다.

  • 국가(Country)
  • 주·도(Province/State)
  • 도시(City)
  • 동네(Neighborhood)
  • 상세 거리 주소(Street Address)
  • 우편번호(Postal Code)

따라서 반환된 results 배열에는 정확도 수준이 서로 다른 여러 주소 정보가 포함되어 있으며, 용도에 맞게 적절한 결과를 선택해 사용하면 됩니다.

참고 사항

Google Maps API를 사용하려면 Google Cloud Console에서 API 키를 발급받아 스크립트 URL에 포함해야 하며, 무료 사용량 한도와 요금 정책을 사전에 확인하는 것이 좋습니다.