# AX - 地図

## 概要

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

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

店舗ロケーター、サービスエリアマップ、イベント会場検索、顧客の近接表示など、ポータルユーザーが地理データを可視化する必要があるあらゆる場面に最適です。

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

***

## はじめに

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

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

***

## チュートリアル

| 名前                                                                                                                                                         | 説明                                                   |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| [**レコード詳細情報を表示するようにマップを設定する**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/konpnento/di-tu/rekdowosuruyouniwoshimasu) | Avonni Map を使用して Experience Cloud にレコードを表示する方法を学びます。 |

***

## マップの設定

設定プロセス、特にデータソースとデータマッピングのセクションを理解することは、このコンポーネントを効果的に使用するうえで重要です。

### データソース設定

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FcxKsH0r2uGFwHkcF9gfD%2F2023-12-10_22-25-09.png?alt=media&#x26;token=e996b746-052d-47a4-9643-bd7333c51e9d" alt=""><figcaption></figcaption></figure>

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

### データマッピングの設定

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

<details>

<summary>Avonni Map によるデータモデル共有</summary>

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

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

</details>

特に位置をマッピングする場合は、データマッピングが正しく設定されるよう、位置セクションに重点を置く必要があります。その理由は次のとおりです。

1. **データマッピングの設定**: 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%2FTUmSPkrYMTVIgKitJ4hY%2F2023-12-10_21-19-47.png?alt=media&#x26;token=3bd85485-77ac-4e05-aea7-e6532ba739f0" 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%2FIMKNOfl9gBmLgj4J96kr%2F2023-12-10_22-22-43.png?alt=media&#x26;token=8a50bace-4e25-4bbe-b2a1-a41f52f7449b" alt="" width="375"><figcaption></figcaption></figure>

### その他の設定

#### リストビュー

この機能では、位置のリストを表示または非表示にします。有効な値は visible、hidden、auto です。既定値は auto で、複数のマーカーがある場合のみリストを表示します。

#### ズームレベル

マップコンポーネントでは、ズームレベルを調整して、世界全体から個々の建物まで、さまざまな範囲に焦点を当てることができます。ズームレベルを設定しない場合、マップは自動的に調整され、配置したすべてのマーカーが表示されます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FlKiTOGlm9meh72iI6oyC%2F2023-12-10_22-19-25.png?alt=media&#x26;token=cbad8da6-4d6d-410f-9c74-35363919319f" 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) を参照すると、より詳細な情報が得られます。

#### MapコンポーネントのUI動作

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FoyqBuczzWYU6mkmxUXyu%2F2023-12-10_22-30-28.png?alt=media&#x26;token=1c1bc9b6-befa-4dd5-bd04-d9e4a0d14d51" alt="" width="375"><figcaption></figcaption></figure>

これらの設定により、ユーザーがマップとどのように操作するかを制御でき、より洗練され集中しやすいユーザー体験を提供します。特定のズームやドラッグ機能を無効化するものから、検索バーやフッターなどの便利な機能を追加するものまで、それぞれの設定には明確な目的があります。

<table><thead><tr><th width="255">設定</th><th>説明</th></tr></thead><tbody><tr><td><strong>ドラッグを無効化</strong></td><td>クリック＆ドラッグによるマップの移動を防ぎ、固定位置に保ちます。</td></tr><tr><td><strong>ズームコントロールを非表示</strong></td><td>ズームイン/アウトのコントロールを削除し、マップのズームレベルを一定に保ちます。</td></tr><tr><td><strong>スクロールホイールによるズームを無効化</strong></td><td>マウスホイールでマップが拡大縮小しないようにし、安定したズームレベルを維持します。</td></tr><tr><td><strong>ダブルクリックズームを無効化</strong></td><td>マップをダブルクリックしたときのズームインを無効にし、固定のズームレベルを維持します。</td></tr><tr><td><strong>デフォルトUIを無効化</strong></td><td>ストリートビュー切り替えなどの標準的なマップインターフェース要素を削除し、よりすっきりした表示にします。</td></tr><tr><td><strong>フッターを表示</strong></td><td>マップデータソースや凡例などの追加情報を表示するためのフッターをマップに表示します。</td></tr><tr><td><strong>検索可能</strong></td><td>マップに検索バーを追加し、ユーザーが特定の場所や地点を簡単に検索して拡大表示できるようにします。</td></tr></tbody></table>

#### マップの中心位置

マップ上に複数のマーカーがある場合、すべてのマーカーの中央付近にある中心点に自動的にフォーカスします。この点は、それぞれの位置に基づいて計算されます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fl62QUoutkdckePeDY727%2F2023-12-10_22-20-19.png?alt=media&#x26;token=8f5c5612-4820-4ef9-a112-ae3b81d91be0" alt="" width="375"><figcaption></figcaption></figure>

***

## インタラクション

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F4wdNTTVPjaOZSvfAS2WT%2F2023-12-10_21-29-59.png?alt=media&#x26;token=7860fbe0-0489-4457-808e-616ec8a9f1f8" alt="" width="375"><figcaption></figcaption></figure>

<table><thead><tr><th width="228">操作タイプ</th><th>説明</th></tr></thead><tbody><tr><td><a href="../puropatipaneru/cao-zuo/tsutowo"><strong>トーストを表示</strong></a></td><td>画面上に簡単なポップアップ通知を表示し、マップマーカーをクリックした後に素早いフィードバックや情報を提供します。</td></tr><tr><td><a href="../puropatipaneru/cao-zuo/yi-dong"><strong>移動</strong></a></td><td>ユーザーをサイト内の別ページまたは URL にリダイレクトし、クリックした場所に関するより詳細な情報へ案内します。</td></tr><tr><td><a href="../puropatipaneru/cao-zuo/artomdaruwoku"><strong>アラートモーダルを開く</strong></a></td><td>アラートメッセージ付きのモーダルウィンドウを開き、選択した場所に関する重要な情報や警告を表示します。</td></tr><tr><td><a href="../puropatipaneru/cao-zuo/woku"><strong>確認を開く</strong></a></td><td>確認ダイアログ बॉックスを起動し、イベント参加など追加のユーザー確認が必要な操作に使用します。</td></tr><tr><td><a href="../puropatipaneru/cao-zuo/furdaiaroguwoku"><strong>Flow ダイアログを開く</strong></a></td><td>Salesforce Flow を実行するダイアログを開き、クリックした場所に関連するワークフローやプロセスを開始します。</td></tr></tbody></table>

***

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前                      | 説明                                                                                                                                                                                                                                                                                                          |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **リストタイトル**             | マップのリストのタイトルを設定します。                                                                                                                                                                                                                                                                                         |
| **リストビュー**              | <p>この機能は、マップ上の場所や項目の詳細リストをユーザーに表示するのに特に便利です。</p><ul><li><strong>自動</strong>: 最適な表示を自動的に決定します。</li><li><strong>表示</strong>: リストビューを常に表示したままにします。</li><li><strong>非表示</strong>: リストビューを非表示にします。</li></ul>                                                                                                     |
| **ズームレベル**              | <p>ズームレベルは、デスクトップブラウザでは1〜22、モバイルデバイスでは1〜20の範囲です。</p><p>各ズームレベルで一般的に何が表示されるかの簡単なガイドです。</p><ul><li>レベル1: 世界全体</li><li>レベル5: 大陸または大きな陸地</li><li>レベル10: 都市</li><li>レベル15: 通りレベルの詳細</li><li>レベル20: 個々の建物</li></ul>                                                                                               |
| **ドラッグを無効化**            | ユーザーがマップビューをドラッグできないようにします。                                                                                                                                                                                                                                                                                 |
| **ズームコントロールを非表示**       | マップからズームイン/アウトのコントロールを削除します                                                                                                                                                                                                                                                                                 |
| **スクロールホイールによるズームを無効化** | マウスのスクロールホイールによるズームをオフにします                                                                                                                                                                                                                                                                                  |
| **ダブルクリックを無効化**         | ダブルクリックによるマップのズームインを防ぎます                                                                                                                                                                                                                                                                                    |
| **デフォルトUIを無効化**         | 標準のGoogle Mapsインターフェースを削除し、よりすっきりした見た目にします                                                                                                                                                                                                                                                                  |
| **フッターを表示**             | マップコンポーネントにフッターセクションを追加します                                                                                                                                                                                                                                                                                  |
| **検索可能**                | マップ内で検索機能を有効にします                                                                                                                                                                                                                                                                                            |
| **データソース**              | <ul><li><strong>手動</strong>: マップマーカーを手動で追加します。</li><li><strong>クエリ</strong>: Salesforceデータとデータマッピングを使用して、マーカーを自動配置します</li></ul>                                                                                                                                                                             |
| **マップの中心位置**            | マップの初期中心点を指定します                                                                                                                                                                                                                                                                                             |
| **フィルタリングオプション**        | ポップオーバーとして表示される、マップのフィルターを設定します                                                                                                                                                                                                                                                                             |
| **検索エンジンオプション**         | <ul><li><strong>プレースホルダー</strong>: 入力前に検索バーに表示されるテキスト。</li><li><strong>位置</strong>: 検索バーの位置として、左、右、中央、または全面表示から選択します</li></ul>                                                                                                                                                                              |
| **サイズ**                 | <ul><li><strong>幅と高さ</strong>: マップコンポーネントの寸法を指定します。</li></ul><p>"<strong><code>オーバーフロー</code></strong>" は、コンテナの境界を超えるコンテンツがどのように扱われたり表示されたりするかを指します。レイアウトコンポーネント内のコンテンツが割り当てられた寸法（高さと幅）に収まらないほど大きい場合、overflow 設定によって余剰コンテンツの扱いが決まります。</p><ul><li><strong>オーバーフロー</strong>: はみ出したコンテンツの管理方法を制御します。</li></ul> |
| {% endtab %}            |                                                                                                                                                                                                                                                                                                             |

{% tab title="🎨 スタイリング" %}

{% endtab %}
{% endtabs %}

***

## ユースケース例

### 例1: 反応型アカウントマップ

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

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

***

#### **実現できること**

* **コンテキストを考慮したマッピング:** データテーブルでの担当者の選択に基づいて、選択されたアカウントの請求先所在地を表示するようにマップが自動更新されます
* **効率的なアカウントナビゲーション:** 担当者はページを離れることなく、アカウントの位置を視覚的に確認できます

***

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

* **Accounts Data Tableコンポーネント:** API名を持つAccounts Data Tableコンポーネントが、すでにページに配置されていることを確認します `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 flowId="tiVuRRBHNCbcUb5qoGQL" url="<https://app.arcade.software/share/tiVuRRBHNCbcUb5qoGQL>" %}

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

***

#### **実現できること**

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

***

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

* **カスタム地理位置フィールド:** リアルタイムの追跡座標を保存するために、Orderオブジェクトにカスタムの地理位置フィールドが作成されていることを確認します

***

#### **セットアップ方法**

{% stepper %}
{% step %}

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

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

{% step %}

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

* API名を次に設定します `TrackingMap`
* タイプを次に設定します `Leaflet Map`
  {% endstep %}

{% step %}

#### **データソースを設定します**

* Orderオブジェクトに対してクエリを作成します
  {% endstep %}

{% step %}

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

* Title を次に設定します `注文番号`
* Type を次に設定します `ピン`
* Location の下で、Latitude を次に設定します `Tracking Geolocation (Latitude)` および Longitude を次に設定します `Tracking Geolocation (Longitude)`
  {% endstep %}

{% step %}

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

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