> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/reactive-components/linking-data-table-and-map-for-dynamic-locations.md).

# Data Table と Map をリンクして動的な位置情報を表示する

## 概要

このガイドでは、Experience Cloud サイトで Avonni Data Table コンポーネントと Avonni Map コンポーネントを接続し、動的でインタラクティブな表示を作成する方法を説明します。2つのコンポーネントを連携させることで、Data Table でアカウントを選択すると Map が更新され、関連する場所が表示されるため、ユーザーのエンゲージメントが高まります。

### 利点

これらのコンポーネントを連携すると、サイトはユーザーの選択にリアルタイムで応答でき、手動で更新しなくてもアカウントの場所を集中的かつ直感的に確認できます。

<figure><img src="/files/492cf7115961cb06488ef63b0dbecd42b8c5f2cf" alt=""><figcaption></figcaption></figure>

## 連携の設定

### **Data Table の設定**

{% stepper %}
{% step %}

#### Data Table コンポーネントを追加する

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

{% step %}

#### Data Table に名前を付ける

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

<figure><img src="/files/42f999076ec00c24bd9c4559e1945932739d826e" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### 1つの選択に制限する

* Data Table のプロパティで、を見つけてください **最大行選択数** 設定し、をにします `1.`
* *なぜこれが必要なのですか？* 1行に制限することで、Map は1つのアカウントの場所を表示し、わかりやすく集中した体験を維持できます。

<figure><img src="/files/e5b8a8dc59c8d354140842355f4597e523cd3dbb" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### Avonni Map の設定

{% stepper %}
{% step %}

#### Map コンポーネントを追加する

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

{% step %}

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

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

{% step %}

#### 結果をフィルターする

* クエリ設定にフィルター条件を追加します:
* なぜこれが必要か? このフィルターにより、Map は Data Table で選択されたアカウントに紐づく場所のみを表示し、選択されたレコードの ID を使用します

<figure><img src="/files/aa9c15ddb43bfe40528ab65df08ecef25c6609e7" alt="" width="563"><figcaption></figcaption></figure>

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

{% step %}

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

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

## 結果

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

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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/reactive-components/linking-data-table-and-map-for-dynamic-locations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.