新しい Autocomplete ウィジェットに移行する

この移行ガイドは、バージョン 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（新版）を追加します。
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');
});