Place Details

プラットフォームを選択: Android iOS JavaScript ウェブサービス

フェッチ フィールド

既存の Place オブジェクトかプレイス ID がある場合は、Place.fetchFields() メソッドを使ってそのプレイスの詳細を取得します。プレイスデータ フィールドのカンマ区切りのリストを戻り値として提供し、フィールド名をキャメルケースで指定します。返された Place オブジェクトを使って、リクエストしたフィールドのデータを取得します。

次のサンプルでは、プレイス ID を使って新しい Place を作成し、Place.fetchFields() を呼び出して displayName フィールドと formattedAddress フィールドをリクエストし、地図にマーカーを追加し、一部のデータをコンソールにロギングしています。

TypeScript

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

    // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
index.ts

JavaScript

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

  // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

index.js
注: Map と Place は、この関数の前に宣言されています。
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 サンプルの全文を見る

Place Overview コンポーネントを使用する

Place Overview コンポーネントは、何百万もの店舗に関する詳細情報として、営業時間、クチコミ（星の数による評価）、写真に加え、事前作成された UI におけるルート検索などのアクションを、5 種類のサイズとフォーマットで表示します。このコンポーネントは、Google Maps Platform の Extended Component Library（より良い地図機能とロケーション機能を迅速に構築できるようにデベロッパーを支援する、一連のウェブ コンポーネント）に含まれています。

Place Overview 構成ツールを使用すると、Place Overview のカスタム コンポーネントに埋め込み可能なコードを作成して、よく知られているフレームワーク（React や Angular など）にエクスポートして使ったり、フレームワークを一切介さずに使ったりできます。