새 자동 완성 위젯으로 이전

이 이전 가이드는 버전 3.59.8 이전의 Place Autocomplete Widget (미리보기)과 통합된 개발자를 위한 것입니다. 이 가이드에서는 최신 버전을 사용하기 위해 변경해야 하는 사항을 보여줍니다.

변경사항

• gmp-placeselect 이벤트의 이름이 gmp-select로 변경되었습니다.
• 이제 gmp-select 이벤트는 place 인스턴스 대신 placePrediction 인스턴스를 반환합니다. PlacePrediction.toPlace()는 적절한 Place 객체를 반환합니다.
• gmp-requesterror 이벤트가 이제 gmp-error입니다.

이전 단계

Place Autocomplete Widget 통합을 최신 버전으로 이전하려면 다음 단계를 따르세요.

1. Cloud 콘솔에서 프로젝트에 Places API (신규) 가 사용 설정되어 있는지 확인합니다.
2. 사용 중인 API 키의 API 제한사항 목록에 Places API (신규) 를 추가합니다.
3. 개발 환경에서 다음 변경사항을 실행하고 테스트합니다.

이벤트 리스너 업데이트

다음 스니펫과 같이 gmp-placeselect를 gmp-select로 변경합니다.

이전

autocompleteElement.addEventListener('gmp-placeselect', (event) => {
  console.log(event.place);
});

변경 후

autocompleteElement.addEventListener('gmp-select', (event) => {
  console.log(event.placePrediction.toPlace());
});

componentRestrictions를 includedRegionCodes로 변경

다음 스니펫과 같이 componentRestrictions 인스턴스를 변경하여 includedRegionCodes 필드를 사용합니다.

이전

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['US']},
  ...
});

변경 후

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedRegionCodes: ['US'],
  ...

types를 includedPrimaryTypes로 변경

다음 스니펫과 같이 types 인스턴스를 변경하여 includedPrimaryTypes 필드를 사용합니다.

이전

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  types: ['restaurant'],
});

변경 후

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ['restaurant'],
});

gmp-requesterror를 gmp-error로 변경

다음 스니펫과 같이 gmp-requesterror 인스턴스를 gmp-error로 변경합니다.

이전

autocompleteElement.addEventListener('gmp-requesterror', (event) => {
  console.log('an error occurred');
});

변경 후

autocompleteElement.addEventListener('gmp-error', (event) => {
  console.log('an error occurred');
});