새 자동 완성 위젯으로 이전

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

변경사항

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

이전 단계

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

1. Cloud 콘솔에서 프로젝트에 Places API (신규)가 사용 설정되어 있는지 확인합니다.
2. 사용 중인 API 키의 API 제한사항 목록에 Places API (New)를 추가합니다.
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');
});