高度なプレイス リスト要素（プレビュー版）

AdvancedPlaceListElement は、Place Resource Name を指定して、場所のコレクションをリストでレンダリングする HTML 要素です。

高度なプレイス リスト要素には、アクション ボタンのカスタマイズ、プレイス アトリビューションの設定、エラー処理などの高度な機能が用意されています。

基本的な使用方法

コンポーネントを使用するには、ページに <gmp-advanced-place-list> 要素を追加し、places 属性を介して場所のリソース名のカンマ区切りのリストを渡します。

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU,places/ChIJyWEHuEmuEmsRm9hTkapTCrk">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-address></gmp-place-address>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-list>

高度な機能

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

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

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-list>

プレイス アトリビューションを設定する

ビジュアル アトリビューションを構成するには、<gmp-place-attribution> 要素を追加して、写真やレビューのソースなど、Maps API のデータ アトリビューション構成全体を表示します。<template> の直接の兄弟として追加する必要があります。<template> 要素の内側に配置された帰属は無視されます。

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-list>

エラーを処理する

gmp-error イベントをリッスンして、リクエストされた 1 つ以上のプレイスの読み込みに失敗した場合のシナリオを適切に処理できます。

const listElement = document.querySelector('gmp-advanced-place-list');
listElement.addEventListener('gmp-error', (e) => {
  // e.detail.errors contains an array of failure objects with specific failed Resource Names
  console.error('Failed to load places: ', e.detail.errors);
});