> 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 %} *** ## はじめに この簡単なチュートリアルで、Map コンポーネントの基本を学び、ユースケースの作成を始めましょう。 {% @arcade/embed url="" flowId="ZiiaXHHeJ3PWe6UcgYBN" %} *** ## チュートリアル | 名前 | 説明 | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | | [**マップを設定してレコード詳細情報を表示する**](/experience-cloud/experience-cloud-ja/chtoriaru/components/map/set-up-the-map-to-show-record-details-information.md) | Avonni Map を使用して Experience Cloud にレコードを表示する方法を学びます。 | *** ## マップの設定 設定プロセス、特に Data Source と Data Mappings のセクションを理解することは、このコンポーネントを効果的に使用するうえで重要です。 ### データソースの設定 Data Source セクションでは、Avonni Map を Salesforce データに接続します。方法は 2 つあります。
| データソースの種類 | 説明 | ユースケース | | ------------ | -------------------------------------- | ---------------------------- | | **手動データソース** | データを手動でデータテーブルに入力します。 | 動的でないデータ、テスト、デモに最適です。 | | **クエリ** | クエリを作成して、Salesforce データでテーブルを自動的に埋めます。 | 動的、リアルタイム、大規模なデータセットに適しています。 | ### データマッピングの設定 Data Mappings セクションでは、フィールドのマッピング方法を指定することで Map コンポーネントを有効化できます。これには、Data Source 設定の位置座標などのフィールドを、関連するマップ属性に対応付ける作業が含まれます。
Avonni Map とのデータモデル共有 **Salesforce のデータ共有ルールの遵守:** * **組織設定の尊重:** Avonni コンポーネントは、Salesforce 組織の既存のデータ共有設定とアクセス設定に完全に準拠しています。 * **干渉しない方針:** これらのコンポーネントは、あらかじめ設定されたデータ共有ルールをいかなる形でも変更または影響しません。 * **制御された表示とアクセス:** Avonni コンポーネントを通じてレコードを表示・操作できるかどうかは、組織で定義された共有設定とユーザー権限によって管理されます
特に場所をマッピングする場合は、Data Mappings を正しく設定するために Location セクションに重点を置く必要があります。その理由は次のとおりです。 1. **データマッピングの設定**: Map コンポーネントが正しい情報を表示するには、Salesforce のデータフィールドを対応する位置ラベルにマッピングする必要があります。たとえば、番地を含む Salesforce フィールドを Map コンポーネントの 'street' ラベルに、都市名を 'city' ラベルに、というように対応付けます。 2. **正確性の重要性**: 正確なマッピングは非常に重要です。間違った Salesforce フィールドを位置ラベルに割り当てると、Map コンポーネントに誤った情報が表示される可能性があります。たとえば、'city' フィールドを誤って 'postal code' ラベルにマッピングすると、マップ上にはまったく別の都市、場合によっては別の国の場所が表示されることがあります。
#### フィルター Filters 属性では、マップコンポーネントに表示されるマーカーを絞り込むために、フィルター対象の特定のフィールドを選択できます。
### その他の設定 #### リストビュー この機能では、場所の一覧を表示または非表示にできます。使用可能な値は visible、hidden、または auto です。既定値は auto で、複数のマーカーがある場合にのみ一覧を表示します。 #### ズームレベル マップコンポーネントでは、ズームレベルを調整して世界全体から個々の建物まで、さまざまな範囲に焦点を当てることができます。ズームレベルを設定しない場合、マップは自動的に調整され、配置したすべてのマーカーが表示されます。
プロパティパネルには、ズームを手動で設定するオプションがあります。ズームレベルの範囲は、デスクトップブラウザーでは 1 から 22、モバイルデバイスでは 1 から 20 です。 各ズームレベルで一般的に何が表示されるかを簡単に示します。 * レベル 1: 世界全体 * レベル 5: 大陸または大きな陸地 * レベル 10: 都市 * レベル 15: 通りレベルの詳細 * レベル 20: 個々の建物 Google Maps API のドキュメントの [ズームレベル](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) を参照して、より詳しい情報を確認してください。 #### Map コンポーネントの UI 動作
これらの設定を使うと、ユーザーがマップとどのように操作するかを制御でき、より洗練されて集中しやすいユーザー体験を提供できます。特定のズームやドラッグ機能を無効にすることから、検索バーやフッターのような便利な機能を追加することまで、各設定には明確な目的があります。
設定説明
ドラッグを無効化クリック＆ドラッグによるマップの移動を防ぎ、固定位置に保ちます。
ズームコントロールを非表示ズームイン/ズームアウトのコントロールを削除し、マップのズームレベルを一定に保ちます。
スクロールホイールでのズームを無効化マウスホイールによるズームイン/ズームアウトを停止し、安定したズームレベルを確保します。
ダブルクリックによるズームを無効化マップをダブルクリックしてもズームインしないようにし、固定ズームレベルを維持します。
デフォルト UI を無効化ストリートビュー切り替えなどの標準的なマップインターフェース要素を削除し、よりすっきりとした表示にします。
フッターを表示マップ上にフッターを表示し、マップデータの出典や凡例などの追加情報を示します。
検索可能マップに検索バーを追加し、ユーザーが特定の場所や地点を簡単に見つけてズームインできるようにします。
#### マップの中心位置 マップ上に複数のマーカーがある場合、すべてのマーカーの中央付近にある中心点を自動的にフォーカスします。この点は、それぞれの位置に基づいて計算されます。
*** ## Interactions Map コンポーネントには、「選択時」インタラクションがあります。この機能では、ユーザーがマップマーカーをクリックしたときに実行するアクションを指定できます。
インタラクションの種類説明
トーストを表示画面上に短いポップアップ通知を表示し、地図マーカーをクリックした後にすばやいフィードバックや情報を提供します。
移動ユーザーをサイト内の別ページまたは URL にリダイレクトし、クリックした場所に関するより詳細な情報へ誘導します。
アラートモーダルを開くアラートメッセージを含むモーダルウィンドウを開き、選択した場所に関する重要な情報や警告を表示します。
確認ダイアログを開く確認ダイアログボックスを起動し、イベント参加のように追加のユーザー確認が必要な操作に使用します。
フロー ダイアログを開くSalesforce Flow を実行するダイアログを開き、クリックした場所に関連するワークフローやプロセスを開始します。
*** ## 設定 {% tabs %} {% tab title="🎛️ プロパティ" %} | 名前 | 説明 | | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **リストタイトル** | マップリストのタイトルを設定します。 | | **リストビュー** |

この機能は、ユーザーがマップ上の場所や項目の詳細な一覧を確認するのに特に便利です。

| | **ズームレベル** |

ズームレベルの範囲は、デスクトップブラウザーでは 1 から 22、モバイルデバイスでは 1 から 20 です。

各ズームレベルで一般的に何が表示されるかを簡単に示します。

| | **ドラッグを無効化** | ユーザーがマップビューをドラッグできないようにします。 | | **ズームコントロールを非表示** | マップからズームイン/ズームアウトのコントロールを削除します | | **スクロールホイールでのズームを無効化** | マウスのスクロールホイールによるズームをオフにします | | **ダブルクリックを無効化** | ダブルクリックでマップがズームインしないようにします | | **デフォルト UI を無効化** | よりすっきりした見た目にするため、標準の Google Maps インターフェースを削除します | | **フッターを表示** | Map コンポーネントにフッターセクションを追加します | | **検索可能** | マップ内で検索機能を有効化します | | **データソース** | | | **マップの中心位置** | マップの初期中心点を指定します | | **フィルタリングオプション** | ポップオーバーとして表示されるマップのフィルターを設定します | | **検索オプション** | | | **サイズ** |

"オーバーフローとは、コンテナの境界を超えたコンテンツがどのように処理または表示されるかを指します。レイアウトコンポーネント内のコンテンツが、割り当てられた寸法（高さと幅）に収まらないほど大きい場合、overflow 設定によって余分なコンテンツがどうなるかが決まります。

| | {% endtab %} | | {% tab title="🎨 スタイリング" %} {% endtab %} {% endtabs %} *** ## ユースケース例 ### 例 1: リアクティブなアカウントマップ {% @arcade/embed url="" flowId="Dxon9206UTTMphdamjrL" %} ユーザーの選択に即座に応答するインタラクティブなマップで、アカウントデータを活用しましょう。Map コンポーネントを 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 を `アカウント名` * Location の下で、Latitude を `請求先緯度` および Longitude を `請求先経度` {% endstep %} {% step %} #### **作業をプレビュー** * プレビューを起動し、Accounts Data Table でレコードを選択して、マップが対応する請求先住所に更新されることを確認します {% endstep %} {% endstepper %} ### 例 2: 顧客注文の追跡 {% @arcade/embed url="" flowId="tiVuRRBHNCbcUb5qoGQL" %} 顧客に、注文が現在どこにあるのかをリアルタイムで可視化しましょう。Order オブジェクトから地理位置データを直接マッピングすることで、顧客に常に状況を知らせる、透明で直感的な追跡体験を構築できます。 *** #### **達成できること** * **注文のライブ可視化:** 顧客は、注文の現在位置がインタラクティブなマップ上に表示されるのを確認できます * **透明性による信頼:** 明確で視覚的な追跡体験により、サポート問い合わせが減り、顧客満足度が向上します *** #### **始める前に** * **カスタムのジオロケーションフィールド:** リアルタイム追跡座標を保存するために、Order オブジェクト上にカスタムのジオロケーションフィールドが作成されていることを確認します *** #### **設定方法** {% stepper %} {% step %} #### **Map コンポーネントを追加** * AX – Map コンポーネントを Experience Builder のキャンバスにドラッグします {% endstep %} {% step %} #### **コンポーネントを設定する** * API 名を `TrackingMap` * タイプを `Leaflet Map` {% endstep %} {% step %} #### **データソースを設定** * Order オブジェクトでクエリを作成します {% endstep %} {% step %} #### **データマッピングを設定** * Title を `注文番号` * Type を `Pin` * Location の下で、Latitude を `追跡ジオロケーション（緯度）` および 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=&goal= ``` `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.