모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

주소 및 검색어 자동완성

소개

자동완성은 Google Maps JavaScript API의 장소 라이브러리 기능입니다. 자동완성을 사용하여 애플리케이션에 Google 지도 검색 필드의 입력 자동완성 검색 기능을 적용할 수 있습니다. 사용자가 주소 입력을 시작하면 자동완성이 나머지를 채웁니다.

시작하기

Google Maps JavaScript API에서 장소 라이브러리를 사용하려면 먼저 Google Maps JavaScript API에 대해 설정한 동일한 프로젝트의 Google API Console에서 Google Places API Web Service를 활성화해야 합니다.

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

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

라이브러리 로드

장소 서비스는 메인 Maps JavaScript API 코드와는 별개인 자체 포함된 라이브러리입니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 Maps API 부트스트랩 URL의 libraries 매개변수를 사용하여 로드해야 합니다.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

자세한 내용은 라이브러리 개요를 참조하세요.

사용 제한 및 정책

할당량

Google Places API Web Service 및 장소 자동완성은 Google Places API Web Service에 대한 사용 제한 문서에 설명된 사용 할당량을 공유합니다. 이 사용 제한은 Google Maps JavaScript API의 장소 라이브러리을 사용하는 경우에도 적용됩니다. 일일 사용량은 클라이언트측 요청과 서버측 요청의 합계로 계산합니다.

정책

Google Maps JavaScript API의 장소 라이브러리는 Google Places API Web Service에 대해 설명한 정책에 따라 사용해야 합니다.

클래스 요약

이 API는 두 가지 유형의 자동완성 위젯을 제공하는데, 각각 AutocompleteSearchBox 클래스를 통해 추가할 수 있습니다. 또한, AutocompleteService 클래스를 사용하여 프로그래밍 방식으로 자동완성 결과를 검색할 수 있습니다.

다음은 사용 가능한 클래스 요약입니다.

  • Autocomplete는 웹 페이지에 텍스트 입력 필드를 추가하고, 해당 필드에 문자 입력이 있는지 모니터링합니다. 사용자가 텍스트를 입력하면 자동완성이 드롭다운 선택 목록 형식으로 장소 예상 검색어를 반환합니다. 사용자가 목록에서 장소를 선택하면 장소에 대한 정보가 자동완성 객체에 반환되며, 애플리케이션에서 검색할 수 있습니다. 아래에서 자세한 내용을 참조하세요.
  • SearchBoxAutocomplete와 거의 동일한 방식으로 웹 페이지에 텍스트 입력 필드를 추가합니다. 차이는 다음과 같습니다.
    • 주요 차이는 선택 목록에 나타나는 결과에 있습니다. SearchBox는 확장된 예상 검색어 목록을 제공하며, Google Places API에서 정의된 장소와 더불어 제안 검색어도 포함할 수 있습니다. 예를 들어, 사용자가 'pizza in new'를 입력하면 선택 목록에 'pizza in New York, NY' 문구는 물론 다양한 피자 매장 이름도 포함될 수 있습니다.
    • SearchBox는 검색 제한을 위해 Autocomplete보다 적은 옵션을 제공합니다. 검색상자에서는 주어진 LatLngBounds로 검색을 편중할 수 있습니다. 자동완성에서는 특정 국가 및 특정 장소 유형으로 검색을 제한하는 것은 물론, 경계를 설정할 수도 있습니다.
    아래에서 자세한 내용을 참조하세요.
  • AutocompleteService 객체를 생성하여 예상 검색어를 프로그래밍 방식으로 검색할 수 있습니다. getPlacePredictions()를 호출하여 일치하는 장소를 검색하거나, getQueryPredictions()를 호출하여 일치하는 장소와 함께 제안 검색어를 검색합니다. 참고: AutocompleteService는 UI 컨트롤을 추가하지 않습니다. 대신, 위의 메서드는 예상 검색어 객체의 배열을 반환합니다. 각 예상 검색어 객체에는 예상 검색어는 물론, 참조 정보 및 결과가 사용자 입력과 얼마나 일치하는지에 대한 상세정보가 포함됩니다. 아래에서 자세한 내용을 참조하세요.

이 페이지의 나머지 부분에서는 예시 사용 사례와 위 클래스의 사용에 대한 자세한 정보를 제공합니다.

자동완성 사용 방법

이 동영상은 데모와 코드 샘플을 포함하여, Autocomplete를 사용하는 방법을 보여줍니다.

예시: 주소 양식 자동완성

애플리케이션에 온라인 주문 배송 주소나 신용카드대금 청구지 주소, 택시 예약 양식 등의 주소 양식이 포함되어 있나요? 자동완성이 사용자에게 상세정보를 제공하도록 도움을 줄 수 있습니다.

그림 1은 자동완성 텍스트 필드와 사용자가 검색 쿼리를 입력할 때 제공되는 장소 예상 검색어 선택 목록을 보여줍니다.

자동완성 텍스트 필드와 사용자가 검색 쿼리를 입력할 때 제공되는 장소 예상 검색어 선택 목록.
그림 1: 자동완성 텍스트 필드 및 선택 목록

사용자가 선택 목록에서 주소를 선택하면 애플리케이션이 주소 양식을 채울 수 있습니다.

완성된 주소 양식.
그림 2: 완성된 주소 양식

실제 주소 양식 보기: 예시 보기(places-autocomplete-addressform.html).

웹 페이지에 자동완성을 추가하는 방법을 알아보세요.

예시: 지도 컨트롤 자동완성

자동완성은 그림 3과 같이 지도 애플리케이션의 일부로 사용자에게 정보를 입력하도록 요구할 때 유용합니다.

부분 도시 검색 쿼리 및 일치하는 장소를 보여주는 자동완성 텍스트 필드.
그림 3: 자동완성 텍스트 필드 및 선택 목록

실제 사례 보기: 예시 보기(places-autocomplete-hotelsearch.html).

웹 페이지에 자동완성을 추가하는 방법을 알아보세요.

장소 및 주소 자동완성 추가

Autocomplete는 웹 페이지에 텍스트 입력 필드를 생성하고, UI 선택 목록에 장소 예상 검색어를 제공하며, getPlace() 요청에 응답하여 장소 세부정보를 반환합니다. 선택 목록의 각 항목은 Google Places API에서 정의된 단일 장소에 해당합니다.

Autocomplete 생성자는 다음 두 개의 인수를 취합니다.

  • text 유형의 HTML input 요소. 자동완성 서비스가 모니터링하고 결과를 첨부하는 입력 필드입니다.
  • options 인수. 다음 속성을 포함할 수 있습니다.
    • types 배열은 아래 지원되는 유형에 나오는 명시적 유형 또는 유형 집합을 지정합니다. 유형을 지정하지 않으면 모든 유형이 반환됩니다. 일반적으로 하나의 유형만 허용됩니다. 예외적으로 geocode 유형과 establishment 유형은 안전하게 혼용할 수 있지만, 유형을 지정하지 않은 경우와 효과는 동일합니다. 지원 유형은 다음과 같습니다.
      • geocode는 장소 서비스에게 사업체 결과 대신 지오코딩 결과만 반환하도록 지시합니다.
      • address는 장소 서비스에게 정확한 주소를 지닌 지오코딩 결과만 반환하도록 지시합니다.
      • establishment는 장소 서비스에게 사업체 결과만 반환하도록 지시합니다.
      • (regions) 유형 집합은 장소 서비스에게 다음 유형과 일치하는 모든 결과를 반환하도록 지시합니다.
        • locality
        • sublocality
        • postal_code
        • country
        • administrative_area1
        • administrative_area2
      • (cities) 유형 집합은 장소 서비스에게 locality 또는 administrative_area3와 일치하는 결과를 반환하도록 지시합니다.
    • 객체bounds는 장소를 검색할 영역을 지정하는 google.maps.LatLngBounds 객체입니다. 결과는 이 경계 안에 포함된 장소로 편중되지만 제한되지는 않습니다.
    • componentRestrictions을 사용하여 특정 그룹으로 결과를 제한할 수 있습니다. 현재는 componentRestrictions를 사용하여 국가별로 필터링할 수 있습니다. 국가는 두 문자(ISO 3166-1 Alpha-2 호환 국가 코드)로 전달되어야 합니다.
    • placeIdOnly를 사용하여 장소 ID만 검색하도록 Autocomplete 위젯에 지시할 수 있습니다. Autocomplete 객체에서 getPlace()를 호출하면 사용할 수 있는 PlaceResult에는 place id, typesname 속성 집합만 있습니다. 반환된 장소 ID를 장소, 지오코딩, 길찾기 또는 거리 행렬 서비스 호출과 함께 사용할 수 있습니다.

자동완성에 편중 및 검색 영역 경계 설정

다음과 같은 방식으로 대략적인 위치나 장소를 선호하도록 자동완성 결과를 편중할 수 있습니다.

  • Autocomplete 객체 생성 시 경계를 설정합니다.
  • 기존 Autocomplete에서 경계를 변경합니다.
  • 지도 뷰포트에 경계를 설정합니다.
  • 특정 국가로 검색을 제한합니다.

아래 섹션에서 자세히 설명됩니다.

Autocomplete 객체 생성 시 경계 설정

아래 예시는 boundstypes 옵션을 사용하여 지정된 지리 영역 내에 있는 곳을 우선으로 'establishment' 유형의 사업체를 요청합니다.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

기존 자동완성의 경계 변경

setBounds()를 호출하여 기존 Autocomplete에서 검색 영역을 변경합니다.

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

예시 보기(places-autocomplete-addressform.html).

지도 뷰포트에 경계 설정

bindTo()를 사용하여 지도의 뷰포트가 변경되더라도 결과를 해당 뷰포트로 편중합니다.

autocomplete.bindTo('bounds', map);

예시 보기(places-autocomplete.html).

특정 국가로 검색 제한

componentRestrictions 옵션을 사용하여 특정 국가로 자동완성 검색을 제한합니다. 다음 코드는 프랑스 내의 도시로 결과를 제한합니다.

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

autocomplete = new google.maps.places.Autocomplete(input, options);

다음 예시에서는 사용자가 국가를 선택한 후에 자동완성 결과를 해당 국가로 제한할 수 있습니다.

// Set the country restriction based on user input.
// Also center and zoom the map on the given country.
function setAutocompleteCountry() {
  var country = document.getElementById('country').value;
  if (country == 'all') {
    autocomplete.setComponentRestrictions([]);
    map.setCenter({lat: 15, lng: 0});
    map.setZoom(2);
  } else {
    autocomplete.setComponentRestrictions({'country': country});
    map.setCenter(countries[country].center);
    map.setZoom(countries[country].zoom);
  }
  clearResults();
  clearMarkers();
}

예시 보기(places-autocomplete-hotelsearch.html).

자동완성의 자리 표시자 텍스트 사용자 지정

기본적으로, 자동완성 서비스가 생성한 텍스트 필드에는 표준 자리 표시자 텍스트가 포함됩니다. 텍스트를 수정하려면 input 요소에서 placeholder 특성을 설정합니다.

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

참고: 기본 자리 표시자 텍스트는 자동으로 현지화됩니다. 자체 자리 표시자 값을 지정할 경우, 애플리케이션에서 해당 값의 현지화를 처리해야 합니다. Google Maps JavaScript API가 사용할 언어를 선택하는 방법에 관한 내용은 현지화 문서를 읽어보세요.

자동완성에서 장소 정보 가져오기

사용자가 자동완성 텍스트 필드에 첨부된 예상 검색어에서 장소를 선택할 경우, 서비스가 place_changed 이벤트를 실행합니다. Autocomplete 객체에서 getPlace()를 호출하고 PlaceResult 객체를 검색할 수 있습니다.

기본적으로, 자동완성은 전체 주소를 한 줄의 텍스트로 제공합니다. 주소 양식의 경우, 구조화된 형식으로 주소를 가져오는 것이 유용합니다. Autocomplete.getPlace()를 사용하여 구조화된 주소를 비롯한 각 자동완성 예상 검색어의 전체 상세정보를 검색할 수 있습니다.

placeIdOnly 옵션을 사용하는 경우 PlaceResult 객체에는 place_id, typesname 속성 집합만 있으므로 Autocomplete 객체는 장소 세부정보를 가져오지 않습니다.

장소 세부정보를 가져오려면 place_changed 이벤트가 발생할 때 Autocomplete 객체에서 getPlace()를 호출하여 PlaceResult 객체를 검색합니다. 그런 다음 지오코딩을 사용하여 위치 좌표를 가져오거나 장소 서비스를 사용하여 선택한 장소에 대한 자세한 정보를 얻을 수 있습니다.

PlaceResult 객체에 대한 자세한 내용은 장소 상세정보 결과 문서를 참조하세요.

다음 예시는 자동완성을 사용하여 주소 양식의 필드를 채웁니다.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

예시 보기(places-autocomplete-addressform.html).

SearchBox를 사용하면 사용자가 '뉴욕의 피자 가게' 또는 '롭슨 거리 근처 신발 매장' 등의 텍스트 기반 지리 검색을 수행할 수 있습니다. SearchBox에 텍스트 필드를 첨부할 수 있습니다. 텍스트가 입력되면, 서비스가 드롭다운 선택 목록의 형태로 예상 검색어를 반환합니다.

SearchBox는 확장된 예상 검색어 목록을 제공하며, Google Places API에서 정의된 장소와 더불어 제안 검색어도 포함할 수 있습니다. 예를 들어 사용자가 'pizza in new'를 입력하면 선택 목록에 'pizza in New York, NY'과 다양한 피자 매장 이름이 포함될 수 있습니다. 사용자가 목록에서 장소를 선택하면 장소에 대한 정보가 검색상자 객체에 반환되며, 애플리케이션에서 검색할 수 있습니다.

SearchBox 생성자는 다음 두 개의 인수를 취합니다.

  • text 유형의 HTML input 요소. SearchBox 서비스가 모니터링하고 결과를 첨부하는 입력 필드입니다.
  • options 인수는 bounds 속성을 포함할 수 있는 인수입니다. bounds는 장소를 검색할 영역을 지정하는 google.maps.LatLngBounds 객체입니다. 결과는 이 경계 안에 포함된 장소로 편중되지만 제한되지는 않습니다.

다음 코드는 경계 매개변수를 사용하여 위도/경도 좌표를 통해 지정된 특정 지리적 영역 내의 장소로 결과를 편중합니다.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

검색상자의 검색 영역 변경

기존 SearchBox의 검색 영역을 변경하려면 SearchBox 객체에서 setBounds()를 호출하고 관련 LatLngBounds 객체를 전달합니다.

예시 보기(places-searchbox.html).

검색상자 정보 가져오기

사용자가 검색상자에 첨부된 예상 검색어에서 한 항목을 선택하면, 서비스가 places_changed 이벤트를 실행합니다. SearchBox 객체에서 getPlaces()호출하고, 여러 예상 검색어를 포함한 배열을 검색할 수 있습니다. 각각의 예상 검색어는 PlaceResult 객체입니다.

PlaceResult 객체에 대한 자세한 내용은 장소 상세정보 결과 문서를 참조하세요.

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

예시 보기(places-searchbox.html).

자동완성 및 검색상자 위젯 스타일 지정

기본적으로 AutocompleteSearchBox가 제공하는 UI 요소는 Google 지도에 포함하는 용도로 스타일이 지정됩니다. 자신의 사이트에 맞게 스타일링을 수정할 수 있습니다. 다음 CSS 클래스를 사용할 수 있습니다. 아래 표시된 모든 클래스는 AutocompleteSearchBox 위젯에 모두 적용됩니다.

자동완성 및       검색상자 위젯용 CSS 클래스의 그래픽 일러스트
자동완성 및 검색상자 위젯용 CSS 클래스
CSS 클래스 설명
pac-container 장소 자동완성 서비스가 반환한 예상 검색어 목록을 포함하는 시각적 요소. 이 목록은 Autocomplete 또는 SearchBox 위젯 아래 드롭다운 목록으로 나타납니다.
pac-icon 예상 검색어 목록에서 각 항목의 왼쪽에 표시되는 아이콘.
pac-item Autocomplete 또는 SearchBox 위젯이 제공하는 예상 검색어 목록의 항목.
pac-item:hover 사용자가 마우스 포인터로 가리키는 항목.
pac-item-selected 사용자가 키보드로 선택한 항목. 참고: 선택된 항목은 이 클래스와 pac-item 클래스의 멤버가 됩니다.
pac-item-query 예상 검색어의 주요 부분인 pac-item 내부의 범위. 지리적 위치의 경우, '시드니'와 같은 장소 이름이나 '10. King Street'와 같은 거리명과 지번이 포함됩니다. '뉴욕의 피자'와 같은 텍스트 기반 검색의 경우, 쿼리의 전체 텍스트가 포함됩니다. 기본적으로, pac-item-query는 검은색으로 칠해집니다. pac-item에 추가 텍스트가 있는 경우, pac-item-query 외부에 있고 pac-item에서 해당 스타일링을 상속합니다. 기본적으로 색상은 회색입니다. 추가 텍스트는 일반적으로 주소입니다.
pac-matched 사용자의 입력과 일치하는 반환된 예상 검색어의 일부. 기본적으로, 일치하는 텍스트는 굵은 텍스트로 강조됩니다. 일치하는 텍스트는 pac-item 내 어디에든 있을 수 있습니다. 반드시 pac-item-query의 일부인 것은 아니며, 부분적으로 pac-item-query 내에 있거나 pac-item의 나머지 텍스트에 있을 수도 있습니다.

자동완성 서비스에서 예상 검색어 검색

프로그래밍 방식으로 예상 검색어를 검색하려면 AutocompleteService 클래스를 사용합니다. AutocompleteService는 UI 컨트롤을 추가하지 않습니다. 대신, 예상 검색어 객체의 배열을 반환합니다. 각 예상 검색어 객체에는 예상 검색어 텍스트와 참조 정보 및 결과가 사용자 입력과 얼마나 일치하는지에 대한 상세정보가 포함됩니다. 위에서 설명한 AutocompleteSearchBox가 제공하는 것보다 사용자 인터페이스에 대한 제어력을 강화하고 싶을 때 유용합니다.

AutocompleteService는 다음 메서드를 노출합니다.

  • getPlacePredictions()는 장소 예상 검색어를 반환합니다. 참고: Places API에서 정의된 바와 같이, '장소'는 시설이나 지리적 위치 또는 유명한 관심 지점이 될 수 있습니다.
  • getQueryPredictions()는 확장된 예상 검색어 목록을 제공하며, Places API에서 정의된 장소와 더불어 제안 검색어도 포함할 수 있습니다. 예를 들어 사용자가 'pizza in new'를 입력하면 선택 목록에 'pizza in New York, NY'과 다양한 피자 매장 이름이 포함될 수 있습니다.

위의 메서드는 모두 다음 형식으로 예상 검색어 객체 5개의 배열을 반환합니다.

  • description은 일치하는 예상 검색어입니다.
  • id는 이 장소를 표시하는 고유 식별자를 포함합니다. 이 식별자는 이 장소에 대한 정보를 검색하는 데 사용할 수 없지만, 장소에 관한 데이터를 통합하고 별도의 검색을 통해 장소의 ID를 확인하는 데 사용할 수 있습니다. ID는 가끔 변경될 수 있습니다. 따라서 저장된 장소의 ID는 같은 장소의 차후 세부정보 요청에서 반환된 ID와 비교하여 필요한 경우 업데이트할 것을 권장합니다. 참고: id는 이 페이지의 지원 중단 고지에서 설명하였듯이 이제 지원이 중단되고 place_id로 대체됩니다.
  • matched_substrings는 사용자 입력에서 요소를 비교하는 description의 하위 문자열 집합을 포함합니다. 애플리케이션에서 이러한 하위 문자열을 강조할 때 유용합니다. 대부분의 경우, 쿼리는 description 필드의 하위 문자열로 나타납니다.
    • length는 하위 문자열의 길이입니다.
    • offset은 description 문자열 처음부터 측정한 문자 오프셋입니다. 여기서 일치된 하위 문자열이 나타납니다.
  • place_id는 장소를 고유하게 식별하는 텍스트 식별자입니다. 장소에 관한 정보를 검색하려면 이 식별자를 장소 세부정보 요청placeId 필드에 삽입해 전달합니다. 장소 ID로 장소를 참조하는 방법에 대해 자세히 알아보세요.
  • reference에는 향후 세부정보 서비스를 검색하는 데 사용할 수 있는 토큰이 포함됩니다. 이 토큰은 세부정보 서비스에 대한 요청에 사용된 참조와 다를 수 있습니다. 장소에 대해 저장된 참조는 정기적으로 업데이트하는 것이 좋습니다. 토큰은 장소를 고유하게 식별하지만 장소는 토큰을 식별하지 못합니다. 한 장소에 다수의 유효한 참조 토큰이 있을 수 있습니다. 참고: reference는 이 페이지의 지원 중단 고지에서 설명하였듯이 이제 지원이 중단되고 place_id로 대체됩니다.
  • terms는 쿼리 요소를 포함하는 배열입니다. 장소의 경우, 각 요소는 대개 주소의 일부분을 구성합니다.
    • offset은 description 문자열 처음부터 측정한 문자 오프셋입니다. 여기서 일치된 하위 문자열이 나타납니다.
    • value는 일치하는 검색어입니다.

아래 예시는 'pizza near'라는 문구에 대한 쿼리 예상 검색어 요청을 실행하고 결과를 목록으로 표시합니다.

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}
<div id="right-panel">
  <p>Query suggestions for 'pizza near Syd':</p>
  <ul id="results"></ul>
</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;
}
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initService"
    async defer></script>
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}

예시 보기(places-queryprediction.html).

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

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