Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

高度なプレイスの詳細要素（プレビュー）

Advanced Place Details Element と Advanced Place Details Compact Element は、場所の詳細をレンダリングする HTML 要素です。

AdvancedPlaceDetailsElement は、可視化可能なすべてのプレイスデータをサポートしており、複数の写真を含めることができます。
AdvancedPlaceDetailsCompactElement は、スペースを最小限に抑え、場所に関する簡潔な情報（名前、住所、評価など）を表示するように設計されています。写真が 1 枚含まれることもあります。

高度な場所の詳細要素と高度な場所の詳細コンパクト要素は、アクションボタンのカスタマイズ、場所の名前の省略、クチコミやメディアのフィルタリングなど、同じ高度な機能を提供します。

カスタマイズツールを使用すると、さまざまなプロパティのセットが Place Details 要素の外観にどのように影響するかを視覚化し、HTML/CSS、Kotlin/XML、Swift のコードにアクセスできます。

高度な Place Details 要素（プレビュー）

地図上のマーカーをクリックすると、高度な場所の詳細要素にその場所の詳細が表示されます。

AdvancedPlaceDetailsElement は、営業時間、ウェブサイト、電話番号、AI を活用した要約（編集による要約へのフォールバックあり）、タイプ固有のハイライト、クチコミ、AI を活用したクチコミの要約、コード、機能リストなど、幅広いコンテンツ要素をサポートしています。

地図に場所の詳細を表示するには、HTML ページの gmp-map 要素に gmp-advanced-place-details 要素を追加します。場所を選択するには、子要素 gmp-place-details-place-request を含めます。これは、Place オブジェクト、プレイス ID、またはプレイスのリソース名にできます。

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

コンテンツを構成する

次の例に示すように、子要素をネストしてスポットの詳細を選択、構成することで、gmp-advanced-place-details 要素で表示される特定のスポットのコンテンツを制御できます。

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
                <gmp-place-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

各子コンテンツ要素は、表示する対応する場所の詳細を選択します。gmp-place-address は場所の住所を選択し、gmp-place-price は場所の価格帯を選択します。gmp-place-summary 要素と gmp-place-review-summary 要素は、それぞれ場所とそのクチコミの AI を活用した概要を提供します。選択された詳細は常に固定の事前定義された順序でレンダリングされるため、子要素の順序は関係ありません。

これらの要素の一部は、コンテンツ固有の属性を使用してさらに構成できます。

gmp-place-media 要素は、1 枚の写真を表示するために使用されます。この要素には、クリックするとライトボックスで写真を開く lightbox-preferred 属性が含まれています。ライトボックスはデフォルトで無効になっています。
gmp-place-attribution 要素は、写真やレビューのソースなど、Maps API のデータ帰属に関する包括的な構成を表示するために使用されます。light-scheme-color 属性と dark-scheme-color 属性は、ライトモードとダークモードで帰属表示の色を設定するために使用されます。

サポートされているすべてのコンテンツ要素について詳しくは、プレイスウィジェットのコンテンツのカスタマイズのリファレンスドキュメントをご覧ください。

簡略化のために、 gmp-place-all-content を使用して、高度なプレイスの詳細要素で利用可能なすべての詳細を表示することもできます。また、 gmp-place-standard-content を使用して、標準構成を表示することもできます。

外観を構成する

gmp-advanced-place-details 要素の推奨幅の範囲は 250 ～ 400 ピクセルです。幅が 250 ピクセル未満の場合、正しく表示されないことがあります。アプリケーションに合わせて高さを設定します。Advanced Place Details 要素は、必要に応じて割り当てられたスペース内でスクロールするように設計されています。

gmp-advanced-place-details 要素は、要素の色とフォントを構成するためのさまざまなカスタム CSS プロパティもサポートしています。詳しくは、Places UI キットのカスタムスタイリングをご覧ください。

Advanced Place Details Compact 要素（プレビュー）

地図上のマーカーをクリックすると、その場所の詳細が高度な場所の詳細コンパクト要素に表示されます。

AdvancedPlaceDetailsCompactElement は、最小限のスペースで選択した場所の詳細をレンダリングします。これは、地図上の場所をハイライト表示する情報ウィンドウ、チャットで現在地を共有するなどのソーシャルメディアエクスペリエンス、現在地を選択する際の候補、Google マップ上の場所を参照するメディア記事などで役立ちます。AdvancedPlaceDetailsCompactElement には、名前、住所、評価、タイプ、価格、アクセシビリティアイコン、営業状況、1 枚の写真を表示できます。orientation 属性で選択したとおりに、水平方向または垂直方向に表示できます。

次のスニペットでは、gmp-advanced-place-details-compact は orientation が horizontal に設定された状態で構成されています。追加の属性 truncation-preferred は、折り返すのではなく、特定のコンテンツを 1 行に収まるように切り詰めます。gmp-advanced-place-details-compact 要素には、場所を選択する子要素 gmp-place-details-place-request が含まれています。Place オブジェクト、プレイス ID、または Place のリソース名を指定できます。

  <gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-advanced-place-details-compact>

コンテンツを構成する

次のスニペットに示すように、子要素をネストして場所の詳細を選択、構成することで、gmp-advanced-place-details-compact 要素で表示される特定の場所のコンテンツを制御できます。

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

各子コンテンツ要素は、表示する対応する場所の詳細を選択します。選択された詳細は常に固定の事前定義された順序でレンダリングされるため、子要素の順序は関係ありません。これらの要素の一部は、コンテンツ固有の属性を使用してさらに構成できます。

簡略化のため、 gmp-place-all-content を使用して、Advanced Place Details Compact 要素で利用可能なすべての詳細を表示することもできます。また、 gmp-place-standard-content を使用して、標準構成を表示することもできます。

外観を構成する

縦向きの gmp-advanced-place-details-compact 要素の推奨幅の範囲は 180 ～ 300 ピクセルです。幅が 160 ピクセル未満の場合、正しく表示されないことがあります。高さを固定しないでください。

横向きの gmp-advanced-place-details-compact 要素の推奨幅の範囲は 180 ～ 500 ピクセルです。幅が 160 ピクセル未満の場合、正しく表示されないことがあります。幅が 350 ピクセル未満の場合、サムネイル画像は表示されません。高さを固定しないでください。

gmp-advanced-place-details-compact 要素は、要素の色とフォントを構成するためのさまざまなカスタム CSS プロパティもサポートしています。詳しくは、Places UI キットのカスタムスタイリングをご覧ください。

高度なプレイス詳細コンパクト要素を情報ウィンドウに追加する場合は、カスタムスタイルを gmp-advanced-place-details-compact 要素に直接適用する必要があります。これは、情報ウィンドウが地図のシャドー DOM の一部であるため、外部の CSS スタイルは適用されません。

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

この例では、InfoWindow と AdvancedMarkerElement を使用して、プログラムで地図に AdvancedPlaceDetailsCompactElement を追加する方法を示します。

高度な機能

アクションボタンをカスタマイズする

アクションボタンを Advanced Place Details コンポーネントの直接の子として追加します。標準のナビゲーション接続には <gmp-place-link> を使用し、action 属性を明示的に指定します。必要に応じて、slot 属性を指定できます。有効な事前定義アクションは、open-website、open-directions、open-map、call です。slot 属性を省略すると、デフォルトで action-main になります。

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

視覚的な表示ルールの要件

重要: カスタムアクションボタンが Google 以外の第三者とユーザー情報を共有する場合、エンドユーザーにそのことを明確に伝える必要があります。ビジュアルアトリビューションの要件をご覧ください。

場所の名前を省略する

地名を省略するには、カスタムコンテンツから <gmp-place-name> 要素を明示的に除外します。

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

クチコミとメディアをフィルタする

このコードサンプルは、「コーヒー」に言及しているメディアとレビューのみを表示します。

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

JavaScript を使用して、searchMediaCount プロパティと searchReviewsCount プロパティを読み取ることで、指定された検索クエリに一致するアイテムの合計数を取得することもできます。これらのプロパティにアクセスする前に、gmp-load イベントを待つ必要があります。

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});

高度なプレイスの詳細要素（プレビュー） コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

高度な Place Details 要素（プレビュー）

コンテンツを構成する

外観を構成する

Advanced Place Details Compact 要素（プレビュー）

コンテンツを構成する

外観を構成する

高度な機能

アクション ボタンをカスタマイズする

視覚的な表示ルールの要件

場所の名前を省略する

クチコミとメディアをフィルタする

高度なプレイスの詳細要素（プレビュー）

アクションボタンをカスタマイズする