모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

지오코딩 서비스

개요

지오코딩은 주소(예: "1600 Amphitheatre Parkway, Mountain View, CA")를 지리 좌표(예: 위도 37.423021 및 경도 -122.083739)로 변환하는 프로세스이며, 이 프로세스를 사용하여 마커를 배치하거나 지도의 위치를 지정할 수 있습니다.

역지오코딩은 지리 좌표를 사람이 읽을 수 있는 주소로 변환하는 프로세스입니다. 역지오코더를 사용하면 지정된 장소 ID에 대한 주소를 찾을 수도 있습니다.

Google Maps JavaScript API는 사용자 입력으로부터 동적으로 지오코딩과 역지오코딩을 수행하기 위한 지오코더 클래스를 제공합니다. 정적이고 알려진 주소를 지오코딩하려면 지오코딩 웹 서비스를 참조하세요.

시작하기

Google Maps JavaScript API에서 지오코딩 서비스를 사용하려면 먼저 Google Maps JavaScript API에 대해 설정한 동일한 프로젝트의 Google API Console에서 Google Maps Geocoding API를 활성화해야 합니다.

활성화된 API 목록을 보려면:

  1. Google API Console로 이동합니다.
  2. Select a project 버튼을 클릭한 다음 Google Maps JavaScript API에 대해 설정한 동일한 프로젝트를 선택하고 Open을 클릭합니다.
  3. Dashboard의 API 목록에서 Google Maps Geocoding API를 찾습니다.
  4. 목록에 API가 표시되면 모두 완벽한 상태입니다. API가 표시되지 않으면 활성화합니다.
    1. 페이지 상단에서 ENABLE API를 선택하여 Library 탭을 표시합니다. 또는 왼쪽 메뉴에서 Library를 선택합니다.
    2. Google Maps Geocoding API를 검색한 다음 결과 목록에서 선택합니다.
    3. ENABLE을 선택합니다. 프로세스가 완료되면 Google Maps Geocoding APIDashboard의 API 목록에 나타납니다.

사용 제한 및 정책

할당량

지오코딩 서비스의 사용 제한은 다음과 같습니다.

기본 플랜으로 지오코딩 서비스 사용

  • 클라이언트측 쿼리와 서버측 쿼리의 합계로 계산된 하루2,500개의 요청이 무료로 제공됩니다. enable billing를 통해 추가 요청 1,000개당 0.50달러가 청구되는 더 많은 일일 할당량에 액세스할 수 있습니다(일일 최대 요청: 100,000개).
  • 초당 50개의 요청이 가능하며, 클라이언트측 쿼리와 서버측 쿼리의 합계로 계산합니다.

프리미엄 플랜으로 지오코딩 서비스 사용

  • 24시간당 100,000개 요청의 공유 일일 무료 할당량, 연간 구매의 Maps API 크레딧에 적용되는 추가적인 요청.
  • 프로젝트별로 초당 무제한개의 클라이언트측 요청. 서버측 API는 초당 50개의 요청으로 제한됩니다.

동일한 프로젝트를 공유하는 사용자 수에 상관없이, 사용자 세션당 적용되는 속도 제한입니다.

세션당 속도 제한은 일괄 지오코딩과 같은 일괄 요청에 대한 클라이언트측 서비스를 사용하지 못하게 합니다. 일괄 요청의 경우 Google Maps Geocoding API 웹 서비스를 사용하세요.

정책

지오코딩 서비스는 Google Maps Geocoding API에 대해 설명된 정책에 따라 사용해야 합니다.

지오코딩 요청

Google Maps API는 외부 서버를 호출해야 하므로 지오코딩 서비스 액세스는 비동기식입니다. 그러므로 콜백 메서드를 전달하여 요청이 완료되면 실행시켜야 합니다. 이 콜백 메서드가 결과를 처리해야 합니다. 지오코더가 2개 이상의 결과를 반환할 수 있다는 점에 유의하세요.

google.maps.Geocoder 객체를 통해 코드 내에서 Google Maps API 지오코딩 서비스에 액세스합니다. Geocoder.geocode() 메서드는 지오코딩 서비스 요청을 시작하고, 입력어와 콜백 메서드를 포함하는 GeocoderRequest 객체 리터럴에 이를 전달하여 응답을 받는 즉시 실행합니다.

GeocoderRequest 객체 리터럴은 다음 필드를 포함합니다.

{
 address: string,
 location: LatLng,
 placeId: string,
 bounds: LatLngBounds,
 componentRestrictions: GeocoderComponentRestrictions,
 region: string
}

필수 매개변수: 다음 필드 중 오직 하나만 제공해야 합니다.

  • address — 지오코딩하려는 주소.
  • location — 사람이 읽을 수 있는 가장 가까운 주소를 가져오려는 LatLng(또는 LatLngLiteral). 지오코더가 역지오코딩을 수행합니다. 자세한 내용은 역지오코딩을 참조하세요.
  • placeId — 사람이 읽을 수 있는 가장 가까운 주소를 가져오려는 장소의 ID. 장소 ID는 다른 Google API에 사용할 수 있는 고유 식별자입니다. 예를 들어, Google Maps Roads API에 의해 반환되는 placeId를 사용하면 스냅된 지점의 주소를 가져올 수 있습니다. 장소 ID에 대한 자세한 내용은 장소 ID 개요를 참조하세요. placeId를 전달하면 지오코더가 역지오코딩을 수행합니다. 자세한 내용은 역지오코딩을 참조하세요.

선택적 매개변수:

  • bounds — 지오코드 결과를 더욱 명확하게 범위 이내로 편중하는 LatLngBounds. bounds 매개변수는 지오코더의 결과에 영향만 미치며, 결과를 완전히 제한하지는 않습니다. (자세한 내용은 아래의 뷰포트 편중을 참조하세요.)
  • componentRestrictions — 특정 영역으로 결과를 제한하는 데 사용합니다. (자세한 내용은 아래의 구성 요소 필터링을 참조하세요.)
  • region — 지역 코드로, IANA 언어 region 하위 태그로 지정됩니다. 대부분의 경우, 이 태그는 친숙한 ccTLD("최상위 도메인") 두 문자 값으로 바로 매핑됩니다. region 매개변수는 지오코더의 결과에 영향만 미치며, 결과를 완전히 제한하지는 않습니다. (자세한 내용은 아래의 지역 코드 편중을 참조하세요.)

지오코딩 응답

지오코딩 서비스는 지오코더의 결과를 검색할 때 실행할 콜백 메서드가 필요합니다. 이 콜백은 resultsstatus 코드를 보관할 2개의 매개변수를 해당 순서로 전달해야 합니다.

지오코딩 결과

GeocoderResult 객체는 단일 지오코딩 결과를 나타냅니다. 지오코드 요청은 여러 결과 객체를 반환할 수 있습니다.

results[]: {
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string,
 postcode_localities[]: string,
 geometry: {
   location: LatLng,
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

다음은 이러한 필드에 대한 설명입니다.

  • types[]는 반환된 결과의 유형을 나타내는 배열입니다. 이 배열에는 결과로 반환되는 기능의 유형을 식별하는 0개 이상의 태그 집합이 포함됩니다. 예를 들어, "시카고"의 지오코드는 "시카고"가 도시임을 나타내는 "locality"를 반환하고, 또한 시카고가 정치적 엔터티임을 나타내는 "political"을 반환합니다.
  • formatted_address는 이 위치의 사람이 읽을 수 있는 주소가 포함된 문자열입니다. 이 주소는 대개 "우편 주소"와 일치하지만 국가마다 다를 수 있습니다. (참고로, 영국과 같은 일부 국가에서는 라이선스 제한으로 인해 실제 우편 주소의 배포를 허용하지 않습니다.) 이 주소는 일반적으로 하나 이상의 주소 구성 요소로 구성됩니다. 예를 들어, '111 8th Avenue, New York, NY'라는 주소는 '111 8th Avenue'(도로 주소), 'New York'(시) 및 'NY'(미국의 주)와 같은 개별 주소 구성 요소를 포함합니다. 이러한 주소 구성 요소는 아래에 언급되어 있습니다. (유형에 대한 자세한 내용은 아래의 유형을 참조하세요.
  • address_components[]는 위에 설명된 개별 주소 구성 요소를 포함하는 배열입니다.
  • partial_match는 지오코더가 원래 요청에 대해 정확한 일치를 반환하지 않았으며, 요청된 주소의 일부분만 일치함을 나타냅니다. 원래 요청을 검사하여 맞춤법 오류 및/또는 불완전한 주소를 찾아낼 수 있습니다.

    부분 일치가 가장 자주 발생하는 경우는, 요청으로 전달되는 지역 내에 거리 주소가 존재하지 않는 경우입니다. 또한, 동일한 지역에서 한 요청에 대해 2개 이상의 위치가 일치하는 경우에도 부분 일치가 반환될 수 있습니다. 예를 들어, "21 Henr St, Bristol, UK"는 Henry Street 및 Henrietta Street 모두에 대해 부분 일치를 반환합니다. 참고로, 맞춤법이 틀린 주소 요소가 요청에 포함된 경우에는 지오코딩 서비스에서 대체 주소를 제안할 수도 있습니다. 이러한 방식으로 실행된 제안도 부분 일치로 표시될 수 있습니다.

  • place_id는 다른 Google API에 사용할 수 있는 장소의 고유 식별자입니다. 예를 들어, Google Places API와 함께 place_id를 사용하여 전화번호, 개점 시간, 사용자 리뷰 등의 지역 사업체 상세정보를 알아낼 수 있습니다. 장소 ID 개요를 참조하세요.
  • postcode_localities[]는 우편 번호에 포함된 모든 지방을 표시하는 배열입니다. 이 배열은 우편 번호에 여러 지방이 포함된 결과에만 나타납니다.
  • geometry는 다음 정보를 포함합니다.

    • location은 지오코딩된 위도,경도 값을 포함합니다. 참고로 우리는 이 위치를 서식이 있는 문자열이 아니라 LatLng 객체로 반환합니다.
    • location_type은 지정된 위치에 대한 추가적인 데이터를 저장합니다. 현재는 다음과 같은 값이 지원됩니다.

      • ROOFTOP은 반환된 결과가 지오코드를 정확하게 반영함을 나타냅니다.
      • RANGE_INTERPOLATED는 반환된 결과가 일반적으로 도로에서 정확한 두 지점(예: 교차로) 간에 보간된 근사값을 반영함을 나타냅니다. 거리 주소에 루프톱 지오코드를 사용할 수 없는 경우에는 일반적으로 보간된 결과가 반환됩니다.
      • GEOMETRIC_CENTER는 반환된 결과가 폴리라인(예: 거리) 또는 폴리곤(지역)과 같은 결과의 기하학적 중심임을 나타냅니다.
      • APPROXIMATE는 반환된 결과가 근사값임을 나타냅니다.

    • viewport는 반환된 결과에 권장되는 뷰포트를 저장합니다.
    • (선택적으로 반환되는) bounds는 반환된 결과를 완전히 포함할 수 있는 LatLngBounds를 저장합니다. 참고로, 이러한 경계가 권장 뷰포트와 일치하지 않을 수도 있습니다. (예를 들어, 샌프란시스코에는 파랄론 제도가 포함되며 이 제도는 법적으로 도시의 일부분이지만, 뷰포트에는 반환되지 않을 것입니다.)

이 주소는 지오코더가 브라우저가 선호하는 언어 설정이나 language 매개변수를 사용하여 API JavaScript를 로드할 때 지정된 언어로 반환됩니다. (자세한 내용은 현지화를 참조하세요.)

주소 구성 요소 유형

반환된 결과의 types[] 배열은 주소 유형을 나타냅니다. 이러한 유형은 address_components[] 배열 내에 반환되어 특정 주소 구성 요소의 유형을 나타낼 수도 있습니다. 지오코더 내의 주소는 여러 유형을 가질 수 있고, 이런 유형은 "태그"로 간주될 수 있습니다. 예를 들어, 많은 도시에는 politicallocality 유형의 태그가 붙습니다.

다음은 HTTP 지오코더가 지원 및 반환하는 유형입니다.

  • street_address는 정확한 거리 주소를 나타냅니다.
  • route는 이름이 지정된 도로(예: "US 101")를 나타냅니다.
  • intersection은 일반적으로 두 주요 도로가 만나는 주요 교차로를 나타냅니다.
  • political은 정치적 엔터티를 나타냅니다. 일반적으로 이 유형은 일부 정부 행정 구역의 폴리곤을 나타냅니다.
  • country는 전국적인 정치적 엔터티를 나타내며, 일반적으로 Geocoder에서 반환되는 최고 순위의 유형입니다.
  • administrative_area_level_1은 국가 레벨 아래의 1순위 정부 엔터티를 나타냅니다. 미국 내에서, 이러한 행정 레벨은 주입니다. 모든 국가에 이러한 행정 레벨이 있는 것은 아닙니다.
  • administrative_area_level_2는 국가 레벨 아래의 2순위 정부 엔터티를 나타냅니다. 미국 내에서, 이러한 행정 레벨은 카운티입니다. 모든 국가에 이러한 행정 레벨이 있는 것은 아닙니다.
  • administrative_area_level_3은 국가 레벨 아래의 3순위 정부 엔터티를 나타냅니다. 이 유형은 하위 정부 구역을 나타냅니다. 모든 국가에 이러한 행정 레벨이 있는 것은 아닙니다.
  • administrative_area_level_4는 국가 레벨 아래의 4순위 정부 엔터티를 나타냅니다. 이 유형은 하위 정부 구역을 나타냅니다. 모든 국가에 이러한 행정 레벨이 있는 것은 아닙니다.
  • administrative_area_level_5는 국가 레벨 아래의 5순위 정부 엔터티를 나타냅니다. 이 유형은 하위 정부 구역을 나타냅니다. 모든 국가에 이러한 행정 레벨이 있는 것은 아닙니다.
  • colloquial_area는 엔터티에 대해 보편적으로 사용되는 대체 이름을 나타냅니다.
  • locality는 시 또는 타운의 병합된 정치적 엔터티를 나타냅니다.
  • sublocality는 지방 아래의 1순위 정부 엔터티를 나타냅니다. 일부 위치의 경우 다음과 같은 추가적인 유형 중 하나를 수신할 수도 있습니다: sublocality_level_1 ~ sublocality_level_5. 각 하위 지방 레벨은 하나의 정부 엔터티입니다. 숫자가 클수록 더 작은 지역을 나타냅니다.
  • neighborhood는 이름이 지정된 근방을 나타냅니다.
  • premise는 이름이 지정된 위치를 나타내며, 일반적으로 한 건물 또는 공통 이름을 가진 건물 집합을 나타냅니다.
  • subpremise는 이름이 지정된 위치 아래의 1순위 엔터티를 나타내며, 일반적으로 공통 이름을 가진 건물 집합 내의 단일 건물을 나타냅니다.
  • postal_code는 국가 내의 우편물을 처리하는 데 사용되는 우편 번호를 나타냅니다.
  • natural_feature는 유명한 자연 지형을 나타냅니다.
  • airport는 공항을 나타냅니다.
  • park는 이름이 지정된 공원을 나타냅니다.

유형 목록이 비어 있는 것은, 가령 프랑스의 리외디(Lieu-Dit)와 같이 특정 주소 요소에 대한 알려진 유형이 없음을 나타냅니다.

위의 유형들 이외에도, 주소 구성 요소가 아래 유형을 나타낼 수 있습니다.

  • post_box는 특정한 사서함을 나타냅니다.
  • street_number는 정확한 번지를 나타냅니다.
  • floor는 건물 주소의 층을 나타냅니다.
  • room은 건물 주소의 방을 나타냅니다.

상태 코드

status 코드는 다음 값 중 하나를 반환합니다.

  • "OK"는 오류가 발생하지 않았음을 나타냅니다. 주소가 성공적으로 구문 분석되고 하나 이상의 지오코드가 반환되었습니다.
  • "ZERO_RESULTS"는 지오코드가 성공했지만 반환된 결과가 없음을 나타냅니다. 이는 존재하지 않는 address가 지오코더에 전달된 경우 발생할 수 있습니다.
  • "OVER_QUERY_LIMIT"는 할당량이 초과되었음을 나타냅니다.
  • "REQUEST_DENIED"는 요청이 거부되었음을 나타냅니다.
  • "INVALID_REQUEST"는 일반적으로 쿼리(address, components 또는 latlng)가 누락되었음을 나타냅니다.
  • "UNKNOWN_ERROR"는 서버 오류로 인해 요청을 처리할 수 없음을 나타냅니다. 다시 시도하면 요청이 성공할 수도 있습니다.

이 예시에서는 주소를 지오코딩하고 반환된 위도와 경도 값에 마커를 배치합니다. 핸들러는 익명 함수 리터럴로 전달된다는 점에 유의하세요.

  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 8,
      center: latlng
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  }

  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == 'OK') {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

<body onload="initialize()">
 <div id="map" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>

예시 보기(geocoding-simple.html)

역지오코딩(주소 조회)

일반적으로 지오코딩이라는 용어는 사람이 읽을 수 있는 주소를 지도상의 위치로 변환하는 것을 말합니다. 반대로 지도상의 위치를 사람이 읽을 수 있는 주소로 변환하는 프로세스를 역지오코딩이라고 합니다.

Geocoder는 역지오코딩을 직접 지원합니다. location 매개변수에 텍스트 address를 제공하는 대신, 쉼표로 구분된 위도/경도 쌍을 제공합니다. 또는, placeId를 제공하여 지정된 장소 ID의 주소를 찾습니다.

위치로 역지오코딩

다음 예시는 위도/경도 값을 지오코딩하고 지도의 중심을 그 위치에 둔 다음, 기본 제공 주소가 포함된 정보 창을 나타냅니다. 두 번째 결과를 반환하는데, 첫 번째 결과보다 덜 구체적입니다(이 경우, 근방 이름).

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === 'OK') {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
<div id="floating-panel">
  <input id="latlng" type="text" value="40.714224,-73.961452">
  <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#latlng {
  width: 225px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === 'OK') {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

예시 보기(geocoding-reverse.html).

참고로 이전 예시에서는 두 번째 결과를 보여줬습니다(results[1] 선택). 역지오코더는 대개 2개 이상의 결과를 반환한다는 점에 유의하세요. "주소" 지오코딩은 단순한 우편 주소가 아니라, 위치를 지리적으로 명명하기 위한 방식입니다. 예를 들어, 시카고시의 한 지점을 지오코딩하는 경우, 지오코딩된 지점은 거리 주소, 도시(시카고), 주(일리노이) 또는 국가(미국)로 레이블이 지정될 수 있습니다. 이들은 모두 지오코더에게 주소가 됩니다. 역지오코더는 이 모든 결과를 반환합니다.

역지오코더는 정치적 엔터티(국가, 주, 도시 및 근방), 거리 주소 및 우편 번호가 일치하는 항목을 찾습니다.

아래는 이전의 쿼리에 의해 반환되는 주소의 전체 목록을 나타냅니다.

results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA",
results[1].formatted_address: "Williamsburg, NY, USA",
results[2].formatted_address: "New York 11211, USA",
results[3].formatted_address: "Kings, New York, USA",
results[4].formatted_address: "Brooklyn, New York, USA",
results[5].formatted_address: "New York, New York, USA",
results[6].formatted_address: "New York, USA",
results[7].formatted_address: "United States"

주소는 일치도가 가장 높은 주소에서 낮은 주소 순으로 반환됩니다. 일반적으로 이 경우처럼 가장 눈에 띄는 결과가 더 정확한 주소입니다. 참고로, 우리는 가장 구체적인 거리 주소에서부터 보다 광범위한 정치적 엔터티(예: 근방, 도시, 국가, 주 등)에 이르기까지 다양한 주소 유형을 반환합니다. 더욱 일반적인 주소를 비교하려면 results[].types 필드를 검사할 수도 있습니다.

참고: 역지오코딩은 정밀하지 않습니다. 지오코더는 특정한 허용오차 내에서 가장 가까운 주소 위치를 찾으려고 시도합니다.

장소 ID로 역지오코딩

다음 예시는 장소 ID를 받고 해당 주소를 찾은 다음, 그 위치에 지도의 중심을 둡니다. 또한, 관련 장소의 기본 제공 주소를 보여주는 정보 창을 나타냅니다.

// Initialize the map.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.72, lng: -73.96}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodePlaceId(geocoder, map, infowindow);
  });
}

// This function is called when the user clicks the UI button requesting
// a reverse geocode.
function geocodePlaceId(geocoder, map, infowindow) {
  var placeId = document.getElementById('place-id').value;
  geocoder.geocode({'placeId': placeId}, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
<div id="floating-panel">
  <!-- Supply a default place ID for a place in Brooklyn, New York. -->
  <input id="place-id" type="text" value="ChIJd8BlQ2BZwokRAFUEcm_qrcA">
  <input id="submit" type="button" value="Reverse Geocode by Place ID">
</div>
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  width: 440px;
}
#place-id {
  width: 250px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// Initialize the map.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.72, lng: -73.96}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodePlaceId(geocoder, map, infowindow);
  });
}

// This function is called when the user clicks the UI button requesting
// a reverse geocode.
function geocodePlaceId(geocoder, map, infowindow) {
  var placeId = document.getElementById('place-id').value;
  geocoder.geocode({'placeId': placeId}, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

예시 보기(geocoding-place-id.html).

뷰포트 편중

(경계 상자로 표시된) 지정된 뷰포트 내의 결과를 선호하도록 지오코딩 서비스에게 지시할 수도 있습니다. 그렇게 하려면 GeocoderRequest 객체 리터럴 내에서 bounds 매개변수를 설정하여 이 뷰포트의 경계를 정의합니다. 참고로, 제한은 경계 내의 결과를 선호하기는 하지만, 더 많은 관련 결과가 경계 밖에 있으면, 이 결과들도 포함될 수 있습니다.

예를 들어, "위네카"에 대한 지오코드는 일반적으로 시카고의 교외를 반환합니다.

{
  "types":["locality","political"],
  "formatted_address":"Winnetka, IL, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["locality","political"]
  },{
    "long_name":"Illinois",
    "short_name":"IL",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location":[ -87.7417070, 42.1083080],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJW8Va5TnED4gRY91Ng47qy3Q"
}

그러나, 로스앤젤레스의 샌 페르난도 밸리에 대한 경계 상자를 정의하는 bounds 매개변수를 지정하면, 이 지오코드는 해당 위치에서 "위네카"라는 근방을 반환합니다.

{
  "types":["sublocality","political"],
  "formatted_address":"Winnetka, California, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["sublocality","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_3","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"California",
    "short_name":"CA",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location": [34.213171,-118.571022],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJ0fd4S_KbwoAR2hRDrsr3HmQ"
}

지역 코드 편중

또한, region 매개변수를 사용하여 특정 지역으로 편중된 결과를 반환하도록 지오코딩 서비스를 설정할 수도 있습니다. 이 매개변수는 IANA 언어 region 하위 태그로 지정된 지역 코드를 받습니다. 대부분의 경우, 이 태그는 "uk" 또는 "co.uk"와 같이 친숙한 ccTLD("최상위 도메인") 두 문자 값으로 바로 매핑됩니다. 대부분의 경우, region 태그도 ISO-3166-1 코드를 지원하며, 때로는 ccTLD 값과 다를 수 있습니다(예: "Great Britain"의 경우 "GB").

주요 Google 지도 애플리케이션이 지오코딩을 제공하는 모든 도메인에 대해 지오코딩 요청을 보낼 수 있습니다. 참고로, 제한은 특정 도메인의 결과를 선호하기는 하지만, 더 많은 관련 결과가 도메인 밖에 있으면, 이 결과들도 포함될 수 있습니다.

예를 들어, 지오코딩 서비스의 기본 도메인이 미국으로 설정되어 있기 때문에, "톨레도"에 대한 지오코드는 이 결과를 반환합니다.

{
  "types":["locality","political"],
  "formatted_address":"Toledo, OH, USA",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Ohio",
    "short_name":"OH",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "place_id": "ChIJeU4e_C2HO4gRRcM6RZ_IPHw"
}

region 필드가 'es'(스페인)으로 설정된 "톨레도"의 지오코드는 스페인 도시를 반환합니다.

{
  "types":["locality","political"],
  "formatted_address":"Toledo, España",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Toledo",
    "short_name":"TO",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"Castilla-La Mancha",
    "short_name":"CM",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"España",
    "short_name":"ES",
    "types":["country","political"]
  }],
  "place_id": "ChIJ8f21C60Lag0R_q11auhbf8Y"
}

구성 요소 필터링

지오코딩 서비스가 특정 영역으로 제한된 주소 결과를 반환하도록 설정할 수도 있습니다. componentRestrictions 매개변수를 사용하여 제한을 지정합니다. 필터는 route, locality, administrativeArea, postalCode, country 중 하나 이상으로 구성됩니다. 모든 필터와 일치하는 결과만 반환됩니다. 필터 값은 다른 지오코딩 요청과 동일한 방식의 맞춤법 교정 및 부분 일치를 지원합니다.

다음 예시 함수는 componentRestrictions 매개변수를 사용하여 countrypostalCode를 기준으로 필터링하는 방법을 보여줍니다.

function codeAddress() {
geocoder.geocode({
  componentRestrictions: {
    country: 'AU',
    postalCode: '2000'
  }
}, function(results, status) {
  if (status == 'OK') {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
    });
  } else {
    window.alert('Geocode was not successful for the following reason: ' + status);
  }
});
}

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.