新しい場所の詳細に移行する

Places API は、特定の場所に関する詳細情報を返すことができます。このページでは、Place クラス（新規）と PlacesService クラス（従来）で使用される場所の詳細の違いについて説明します。また、比較用のコード スニペットも提供します。次の表に、Place クラスと PlacesService クラスの場所の詳細の使用に関する主な違いを示します。

PlacesService（レガシー） Place（新規）
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
メソッドでは、結果オブジェクトと google.maps.places.PlacesServiceStatus レスポンスを処理するためにコールバックを使用する必要があります。 Promise を使用し、非同期で動作します。
メソッドには PlacesServiceStatus チェックが必要です。 ステータス チェックは不要で、標準のエラー処理を使用できます。
場所データ フィールドはスネークケースでフォーマットされます。 場所データ フィールドは、キャメルケースでフォーマットされます。
場所タイプと場所データ項目の固定セットに制限されます。 定期的に更新される場所の種類と場所データフィールドの選択肢が拡大されました。

コードの比較

このセクションでは、2 つの類似したコードを比較して、Places サービスと Place クラスの違いを示します。コード スニペットは、プレイスの詳細リクエストを行うために各 API で必要なコードを示しています。また、取得したプレイスデータを使用してマップにマーカーを追加します。

プレイス サービス（従来版）

次の簡潔なコード スニペットは、PlacesService を使用してプレイスの詳細リクエストを行う方法を示しています。このリクエストはコールバックを使用し、PlacesServiceStatus に対する必須の条件チェックが含まれています。必要なプレイスデータ フィールドはリクエスト本文で指定します。

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

その他の情報

プレイスクラス（新規）

次の簡潔なコード スニペットは、Place クラスを使用してプレイス詳細リクエストを行う方法を示しています。リクエストは非同期で、ステータス チェックは含まれていません（標準のエラー処理を使用できます）。プレイス ID を使用して新しい Place インスタンスを作成し、そのインスタンスを使用してリクエスト（fetchFields()）を実行します。必要なプレイスデータ フィールドは、fetchFields() が呼び出されるまで渡されません。これにより、柔軟性が向上します。fetchFields() メソッドは await 演算子を使用するため、async 関数内でのみ使用できます。

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

その他の情報