> 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/experience-components/ax-map.md).

# AX - マップ

## 概要

**AX - マップ** は、Experience Sites ページ上で Salesforce レコードをインタラクティブな位置マーカーとして表示する Experience Cloud コンポーネントです。

ポータルユーザーに、住所フィールドや緯度/経度座標に基づく場所を表示するために使用します。たとえば、近隣のサービス拠点、顧客サイト、店舗検索結果、イベント会場などです。ユーザーはマーカーをクリックしてレコードの詳細を表示し、レコードへ移動できます。Experience Builder で、標準オブジェクトまたはカスタムオブジェクトのどれからでも位置データを取得できます。

店舗検索、サービス地域マップ、イベント会場検索、顧客の近接表示、またはポータルユーザーが地理データを視覚化する必要があるあらゆる場面に最適です。

{% hint style="success" %}
Avonni Map は [リアクティブデータコンポーネントです](/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md)
{% endhint %}

{% hint style="info" %}
**実際のプロジェクトで見る**

[フロー内のサイト調査](https://docs.avonnicomponents.com/projects/use-cases/inside-a-flow/site-survey-inside-a-flow)：フロー内のライブマップ上でトレースされた屋根を、ファイルとして保存します。
{% endhint %}

## はじめに

このシンプルなチュートリアルで Map コンポーネントの基本を学び、ユースケースの構築を始めましょう。

{% @arcade/embed url="<https://app.arcade.software/share/ZiiaXHHeJ3PWe6UcgYBN>" flowId="ZiiaXHHeJ3PWe6UcgYBN" %}

## 設定

このコンポーネントを効果的に使用するには、設定プロセス、特に Data Source と Data Mappings の各セクションを理解することが重要です。

### データソース

Data Source セクションでは、Avonni Map を Salesforce データに接続します。選択肢は 2 つあります。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-bbf1f2f063b341c369b9068021f67942974a6f9a%2F2023-12-10_22-25-09.png?alt=media" alt=""><figcaption></figcaption></figure>

| データソースの種類 | 説明                                    | ユースケース                       |
| --------- | ------------------------------------- | ---------------------------- |
| **手動**    | マップマーカーを手動で入力します。                     | 動的でないデータ、テスト、デモに最適です。        |
| **クエリ**   | クエリを作成して、Salesforce データで自動的にマップを埋めます。 | 動的、リアルタイム、大規模なデータセットに適しています。 |

### データマッピング

Data Mappings セクションでは、フィールドのマッピング方法を指定して Map コンポーネントを有効化できます。これには、Data Source 設定の位置座標などのフィールドを、対応するマップ属性に対応付ける作業が含まれます。

<details>

<summary>Avonni Map とのデータモデル共有</summary>

**Salesforce データ共有ルールの順守:**

* **組織設定の尊重:** Avonni コンポーネントは、Salesforce 組織の既存のデータ共有設定とアクセス設定に完全に準拠します。
* **非干渉ポリシー:** これらのコンポーネントは、事前に設定されたデータ共有ルールにいかなる変更も加えず、影響も与えません。
* **制御された可視性とアクセス:** Avonni コンポーネントを通じてレコードを表示・操作できるかどうかは、組織で定義された共有設定とユーザー権限によって決まります

</details>

特に場所をマッピングする場合、Data Mappings が正しく設定されていることを確認するために、Location セクションに注目する必要があります。その理由は次のとおりです。

1. **Data Mappings の設定**：Map コンポーネントに正しい情報を表示させるには、Salesforce のデータフィールドを対応する位置ラベルにマッピングする必要があります。たとえば、番地を含む Salesforce フィールドを Map コンポーネントの 'street' ラベルに、都市名を 'city' ラベルに、というように対応付けます。
2. **正確性の重要性**：正確なマッピングは非常に重要です。間違った Salesforce フィールドを位置ラベルにマッピングすると、Map コンポーネントは誤った情報を表示する可能性があります。たとえば、'city' フィールドを誤って 'postal code' ラベルにマッピングすると、マップにはまったく別の都市、あるいは別の国の場所が表示されることがあります。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-7848d483a66f625b0cbf6c26b57f58080cd18808%2F2023-12-10_21-19-47.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

#### フィルター

Filters 属性を使用すると、マップコンポーネントに表示されるマーカーを絞り込むために、特定のフィールドを選択できます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-3ac8b3a621aefba55ff2347011210e7ecc213ca0%2F2023-12-10_22-22-43.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

#### マーカーごとの設定

データソースを使用すると、追加した各マーカー行で個別のフィールドが公開されます： **手動** データソースを使用すると、

* **タイトル** と **説明** マーカーとそのポップアップにラベルを付けます。
* **場所** 住所フィールド（Street、City、State、Postal Code、Country）または **緯度**/**経度**.
* **タイプ** マーカーの形状を設定します — Center Location と同じオプション（`デフォルト`, `円`, `長方形`, `ポリゴン`, `ピン`, `CustomIcon`).
* 図形マーカーでは色のコントロールも追加されます — **塗りつぶし色**/**塗りつぶしの不透明度** と **線の色**/**線の不透明度**/**線の太さ** — さらに図形のジオメトリ： **半径** （円）、 **境界** （長方形）、または **パス** （ポリゴン）。
* **アイコン** カスタムマーカーアイコンを設定し、 **選択時** のインタラクションを、マーカーがクリックされたときに実行できます。

### マップ設定

**タイプ** マップエンジンを選択します — **Google Maps** （デフォルト）または **Leaflet**。 **Google Maps** 馴染みのある Salesforce Lightning マップを使う場合はこちらを選択してください。最もシンプルな विकल्पですが、表示は 1,000 マーカーまでに制限されます。 **Leaflet** より大きなデータセット（マーカー上限なし）、カスタムマップタイル、または高度な図形マーカー（円、ポリゴン、長方形）を使用する場合はこちらを選択してください。

**リストのタイトル** 位置リストのタイトルを設定し、 **リスト表示** そのリストを表示するかどうかを制御します： `自動` （マーカーが複数ある場合のみ表示 — デフォルト）、 `表示` （常に表示）、または `非表示`.

**ズームレベル** 初期ズームを設定します。未設定の場合、マップは配置されたすべてのマーカーが表示されるように自動調整されます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-e8077d188c49827b414011b0310d7a20d9d0dd8f%2F2023-12-10_22-19-25.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

ズームレベルは、デスクトップブラウザでは 1 から 22、モバイルデバイスでは 1 から 20 です。各レベルで一般的に何が表示されるかを簡単に示すと次のとおりです：

* レベル 1: 世界全体
* レベル 5: 大陸または大きな陸地
* レベル 10: 都市
* レベル 15: 通りレベルの詳細
* レベル 20: 個々の建物

Google Maps API のドキュメントの [ズームレベル](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) を参照すると、より詳しい情報を確認できます。

**ズームコントロールを非表示** ズームイン/ズームアウトのコントロールを削除し、 **ズームコントロールの位置** それらのコントロールをマップ上のどこに表示するかを設定します。

以下のトグルは、より合理的で集中しやすい体験のために、ユーザーがマップとどのようにやり取りするかを制御します：

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-4f292b11b9f0c9fc47242ce6689c7e79f49a20e1%2F2023-12-10_22-30-28.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

**ドラッグを無効化** クリック＆ドラッグによるマップの移動を禁止します。 **スクロールホイールによるズームを無効化** マウスホイールによるズームを停止します。 **ダブルクリックズームを無効化** ダブルクリックでのズームを無効にします。 **デフォルト UI を無効化** よりすっきりした表示にするため、標準のマップインターフェース要素（ストリートビュー切り替えなど）を削除します。

**ドラッグ可能なマーカー** ユーザーがマーカーをドラッグして位置を変更できるようにし、 **マーカーの自動パンを無効化** マーカーを表示範囲内に保つための自動パンをマップが行わないようにします。

**フッターを表示** マップにフッターを表示します（データソースや凡例に便利です）、そして **検索を表示** 検索バーを追加して、ユーザーが特定の場所を見つけてズームできるようにします。

**ヘッダーアクション** マップのヘッダーにアクションボタンを追加します。

### Center Location

デフォルトでは、マップ上に複数のマーカーがある場合、それらの位置から計算された中央点にフォーカスします。 **Center Location** 設定はこれを上書きします：

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-b61b45f81768cf3581dd9e1e4cf7fc3e6309af01%2F2023-12-10_22-20-19.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

* **緯度** と **経度** 正確な中心座標を設定します。これは住所フィールドよりも優先されます。
* **番地**, **市区町村**, **都道府県**, **郵便番号**、および **国** 座標が指定されていない場合は、住所でマップの中心を設定します。
* **マーカーとして表示** 中心点をマップ上の独自のマーカーとして表示します。
* **マーカータイプ** そのマーカーの形状を設定します — `デフォルト`, `円`, `長方形`, `ポリゴン`, `ピン`、または `CustomIcon` — 形状固有の **マーカータイプ属性** （半径、境界、パスなど）。

### クラスタリング

**クラスタ属性** 近くのマーカーをグループ化して、密集したマップでも見やすくします：

* **クラスタ** クラスタリングを有効にします。
* **最大クラスタ半径** クラスタが中心マーカーからどれだけ広がるかをピクセル単位で設定します（既定は 80）。
* **ズームでクラスタリングを無効化** 選択したズームレベル以下でクラスタリングを停止します。
* **ホバー時に範囲を表示** ユーザーがクラスタにカーソルを合わせると、そのクラスタ内のマーカーの境界を表示します。

### フィルタリングと検索

**フィルター** （上の Data Mappings で設定）ユーザーがマーカーをフィルターできるフィールドを選択し、 **フィルタメニュー属性** フィルタメニューを制御します — その **タイプ** (`横並び`, `ポップオーバー`、または `パネル`）、ピックリストフィルターの並び順、空のピックリスト値を非表示にするかどうか、フィルター値を連動させるかどうか。

**検索エンジン属性** 検索バーを設定します（ **検索を表示**が必要です）：その **プレースホルダー** テキストと **位置** (`左`, `右`, `中央`、または `フィル`).

## インタラクション

Map コンポーネントには、「選択時」インタラクションがあります。この機能では、ユーザーがマップマーカーをクリックしたときにどのアクションを実行するかを指定できます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-c87ac55cf141423c489466dbaf1948f458789c70%2F2023-12-10_21-29-59.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

<table><thead><tr><th width="228">インタラクションタイプ</th><th>説明</th></tr></thead><tbody><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/show-toast.md"><strong>トーストを表示</strong></a></td><td>画面に短いポップアップ通知を表示し、マーカーをクリックした後に簡単なフィードバックや情報を提供します。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md"><strong>移動</strong></a></td><td>サイト内の別ページまたは URL にユーザーをリダイレクトし、クリックした場所に関するより詳細な情報へ誘導します。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-alert-modal.md"><strong>アラートモーダルを開く</strong></a></td><td>警告メッセージ付きのモーダルウィンドウを開き、選択した場所に関する重要な情報や警告を表示します。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-confirm.md"><strong>確認を開く</strong></a></td><td>確認ダイアログボックスを起動します。イベント参加のように追加のユーザー確認が必要な操作に使用します。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-dialog.md"><strong>Flow ダイアログを開く</strong></a></td><td>Salesforce Flow を実行するダイアログを開き、クリックした場所に関連するワークフローや処理を開始します。</td></tr></tbody></table>

## スタイル

{% tabs %}
{% tab title="サイズ" %}
マップのサイズ（幅 / 高さ / オーバーフロー）を制御します。
{% endtab %}

{% tab title="マージン" %}
マップの外側の余白を制御します。
{% endtab %}

{% tab title="パディング" %}
マップの内側の余白を制御します。
{% endtab %}
{% endtabs %}

## ユースケース

| Name                                                                                                                                               | 説明                                                  |
| -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| [**レコード詳細情報を表示するようマップを設定する**](/experience-cloud/experience-cloud-ja/chtoriaru/components/map/set-up-the-map-to-show-record-details-information.md) | Avonni Map を使って Experience Cloud にレコードを表示する方法を学びます。 |

### 例 1 : リアクティブなアカウントマップ

{% @arcade/embed url="<https://app.arcade.software/share/Dxon9206UTTMphdamjrL>" flowId="Dxon9206UTTMphdamjrL" %}

ユーザーの選択に即座に反応するインタラクティブなマップで、アカウントデータを生き生きと表示します。Map コンポーネントを Accounts Data Table に接続することで、担当者が任意のアカウントレコードをクリックした瞬間に、正確な請求先住所を表示できます。

***

#### **達成できること**

* **コンテキスト対応マッピング:** データテーブルでの担当者の選択に基づいて、マップは選択されたアカウントの請求先住所を表示するよう自動更新されます
* **簡単なアカウントナビゲーション:** 担当者はページを離れることなく、視覚的にアカウントを見つけられます

***

#### **始める前に**

* **Accounts Data Table コンポーネント:** Accounts Data Table コンポーネントがすでにページに配置されており、API 名が `AccountsTable`

***

#### **設定方法**

{% stepper %}
{% step %}

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

* AX – Map コンポーネントを Experience Builder キャンバスにドラッグします
  {% endstep %}

{% step %}

#### **コンポーネントを設定する**

* API 名を `MapAccount`
* タイプを `Leaflet`
  {% endstep %}

{% step %}

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

* Account オブジェクトでクエリを作成する
* 次のフィルターを適用します: Id = `{{AccountsTable.selectedRecord.Id}}`
  {% endstep %}

{% step %}

#### **データマッピングを設定する**

* Title を `Account Name`
* Location の下で、Latitude を `Billing Latitude` および Longitude を `Billing Longitude`
  {% endstep %}

{% step %}

#### **作業をプレビューする**

* プレビューを起動し、Accounts Data Table でレコードを選択して、マップが対応する請求先住所を反映して更新されることを確認します
  {% endstep %}
  {% endstepper %}

### 例 2 : 顧客注文追跡

{% @arcade/embed url="<https://app.arcade.software/share/tiVuRRBHNCbcUb5qoGQL>" flowId="tiVuRRBHNCbcUb5qoGQL" %}

注文が今どこにあるのかを、顧客にリアルタイムで見える化します。Order オブジェクトから直接位置データをマッピングすることで、透明性が高く直感的な追跡体験を構築でき、顧客はあらゆる段階で状況を把握できます。

***

#### **達成できること**

* **注文のライブ表示:** 顧客は、注文の現在位置がインタラクティブなマップ上に表示されるのを確認できます
* **透明性による信頼:** 明確で視覚的な追跡体験により、サポート問い合わせが減り、顧客満足度が向上します

***

#### **始める前に**

* **カスタムジオロケーションフィールド:** リアルタイム追跡座標を保存するために、Order オブジェクトにカスタムの Geolocation フィールドが作成されていることを確認してください

***

#### **設定方法**

{% stepper %}
{% step %}

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

* AX – Map コンポーネントを Experience Builder キャンバスにドラッグします
  {% endstep %}

{% step %}

#### **コンポーネントを設定する**

* API 名を `TrackingMap`
* タイプを `Leaflet マップ`
  {% endstep %}

{% step %}

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

* Order オブジェクトでクエリを作成する
  {% endstep %}

{% step %}

#### **データマッピングを設定する**

* Title を `注文番号`
* タイプを `ピン`
* Location の下で、Latitude を `Tracking Geolocation (Latitude)` および Longitude を `Tracking Geolocation (Longitude)`
  {% endstep %}

{% step %}

#### **作業をプレビューする**

* プレビューを起動し、各注文がマップ上に正しい追跡位置のピンとして表示されることを確認します
  {% endstep %}
  {% endstepper %}


---

# 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/experience-components/ax-map.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.