Bermigrasi ke Widget Autocomplete baru

Panduan migrasi ini ditujukan bagi developer yang memiliki integrasi dengan Widget Place Autocomplete (Pratinjau) sebelum versi 3.59.8. Panduan ini menunjukkan perubahan yang perlu Anda lakukan untuk menggunakan versi terbaru.

Perubahan

  • Peristiwa gmp-placeselect telah diganti namanya menjadi gmp-select.
  • Peristiwa gmp-select kini menampilkan instance placePrediction, bukan instance place. PlacePrediction.toPlace() menampilkan objek Place yang tepat.
  • Acara gmp-requesterror sekarang gmp-error.

Langkah migrasi

Untuk memigrasikan integrasi Widget Place Autocomplete ke versi terbaru, lakukan hal berikut:

  1. Pastikan Places API (Baru) diaktifkan untuk project Anda di konsol Cloud.
  2. Tambahkan Places API (Baru) ke daftar pembatasan API untuk kunci API yang Anda gunakan.
  3. Di lingkungan pengembangan Anda, lakukan dan uji perubahan berikut:

Memperbarui pemroses peristiwa

Ubah gmp-placeselect menjadi gmp-select seperti yang ditunjukkan dalam cuplikan berikut:

Sebelum

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

Setelah

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

Mengubah componentRestrictions menjadi includedRegionCodes

Ubah instance componentRestrictions untuk menggunakan kolom includedRegionCodes, seperti yang ditunjukkan dalam cuplikan berikut.

Sebelum

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

Setelah

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

Mengubah types menjadi includedPrimaryTypes

Ubah instance types untuk menggunakan kolom includedPrimaryTypes, seperti yang ditunjukkan dalam cuplikan berikut.

Sebelum

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

Setelah

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

Mengubah gmp-requesterror menjadi gmp-error

Ubah instance gmp-requesterror menjadi gmp-error, seperti yang ditunjukkan dalam cuplikan berikut:

Sebelum

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

Setelah

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