# データテーブルと地図を連携して動的な位置情報を表示する

## 概要

このガイドでは、Experience Cloud サイトで Avonni データテーブルと Avonni マップコンポーネントを接続して、動的でインタラクティブな表示を作成する方法を説明します。これら二つのコンポーネントをリンクすることで、データテーブルでアカウントを選択すると関連する場所がマップに表示され、ユーザーのエンゲージメントが高まります。

### 利点

これらのコンポーネントを連携させることで、サイトはユーザーの選択にリアルタイムで反応し、手動更新なしでアカウントの場所を直感的かつ絞り込んだ方法で探索できるようになります。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FoWSe2ZTSlhp5XtnoOwsw%2F2024-05-28_20-19-59%20(1).gif?alt=media&#x26;token=82d53307-a26c-4761-b958-6dd981dc28b0" alt=""><figcaption></figcaption></figure>

## 統合の設定

### **データテーブルの構成**

{% stepper %}
{% step %}

#### データテーブルコンポーネントを追加

* Experience Cloud ページに Avonni データテーブルコンポーネントを配置して、アカウント情報を表示します。
* *なぜこれが必要か？* データテーブルは出発点として機能し、ユーザーが選択するためのアカウントの詳細を表示します
  {% endstep %}

{% step %}

#### データテーブルに名前を付ける

* データテーブルのプロパティパネルで、次の項目を設定します。 **API 名** に `accountsDatatable`.
* *なぜこれが必要か？* API 名は一意の識別子として機能し、マップなど他のコンポーネントがそれを認識して反応できるようにします。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F5aMWFzJhbAu3rGL7UNKp%2F2024-05-28_20-13-44.png?alt=media&#x26;token=36ef5275-afe2-4788-a1ea-5e40166fe9c6" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### 選択を1つに制限

* データテーブルのプロパティで、次の項目を見つけます。 **最大行選択** 設定し、次の値にします。 `1.`
* *なぜこれが必要か？* 選択を1行に制限することで、マップが単一のアカウントの場所のみを表示し、体験を明確かつ集中させます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FiVmuxP4MrEHxzbhZAfYZ%2F2024-05-28_20-13-442.png?alt=media&#x26;token=86b2f772-adc0-4574-91c3-3103e4a7db1c" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### Avonni マップの構成

{% stepper %}
{% step %}

#### マップコンポーネントを追加

* 同じページに Avonni マップコンポーネントを配置します（例：名前を `relatedLocationsMap`).
* *なぜこれが必要か？* マップは選択されたアカウントに基づいて位置データを表示します。
  {% endstep %}

{% step %}

#### データソースを設定

* マップのプロパティパネルで、次の項目に移動します。 **データソース** セクション。
* 選択 **クエリデータソース** を選び、次のオブジェクトを指定します。 **Account** オブジェクト（または位置データを持つオブジェクト）。
* *なぜこれが必要か？* クエリは Salesforce から位置データを動的に取得します
  {% endstep %}

{% step %}

#### 結果をフィルタリング

* クエリ設定にフィルタ条件を追加します：
* なぜこれか？ このフィルタは、データテーブルで選択されたレコードの ID を使用して、マップが選択されたアカウントにリンクされた場所のみを表示することを保証します

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F7Gn1wW4kpmaBd7EMNFKm%2F2024-05-28_20-15-50.png?alt=media&#x26;token=13e2ec7c-f7b5-421b-b865-e8f00358ae0c" alt="" width="563"><figcaption></figcaption></figure>

| フィールド         | 演算子 | 値                                         |
| ------------- | --- | ----------------------------------------- |
| アカウント ID      | 等しい | `{{accountsDatatable.selectedRecord.Id}}` |
| {% endstep %} |     |                                           |

{% step %}

#### フィールドをマッピング

* フィールドをマッピングして位置マーカーを表示するようにマップを構成します（例： `緯度` と `経度` を Account オブジェクトまたは関連オブジェクトのフィールドに設定）。
* *なぜこれが必要か？* 適切なフィールドマッピングにより、クエリされたデータに基づいてマップ上にマーカーを配置する場所が決まります。
  {% endstep %}
  {% endstepper %}

## 結果

ユーザーがデータテーブルでアカウントを選択すると、マップはそのアカウントに関連する場所のみを自動的に表示するよう更新されます。これによりシームレスでインタラクティブな体験が生まれ、訪問者は効率的にデータを探索できます。

## 一般的な問題のトラブルシューティング

* **マップが更新されない：** accountsDatatable の API 名が正確に一致していること、および最大行選択が 1 に設定されていることを確認してください。フィルタ構文（{{accountsDatatable.selectedRecord.Id}}）を確認します。
* **場所が表示されない：** Account オブジェクトまたは関連オブジェクトに緯度および経度のフィールドがあること、そしてクエリがデータを返していることを確認してください。
* **パフォーマンスの問題：** マップの読み込みが遅い場合は、クエリを簡素化するかレコード数を減らしてください。
* **問題が解決しない場合：** サポートチームにご連絡ください： <support@avonni.com> 支援のため