--- title: "地図を追加" slug: "add-a-map" abstract: "サイトに地図や特定のポイントの場所を追加してください" --- # 地図を追加 地図レンダリングにより、ウェブページのどこにでもインタラクティブマップを簡単に埋め込むことができます。 ページ上でMapを使用する前に、管理者としてweb.configファイルのContent-Security-Policyヘッダーを設定し、使いたい機能を許可する必要があります。ファイルはウェブサイトのルートフォルダ内にあります。以下の例はセキュリティポリシーの設定方法を示しています: ページにマップレンダリングを追加するには: 1. ツールボックスを開き、**マップ** セクションでマップレンダリングをクリックします。レンダリングをクリックしてドラッグし始めると、レンダリングをドロップできるプレースホルダーが青色で点灯します。マップレンダリングを希望のプレースホルダーの上に配置し、プレースホルダーが点灯したら、そのレンダリングをページに置きます。 2. 「 **関連コンテンツ選択** 」ダイアログボックスで、ページに表示したい地図を選択し、**OK**をクリックします。 ![Select the Associated Content dialog box.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/81C43779C5014AA59C8AE582E6B1B809.png) 3. **コントロールプロパティ**ダイアログボックスの**マップ基準**セクションで、以下のフィールドを編集して地図基準とスタイリングを設定します: - **Search results signature** – マップレンダリングを特定のSearch Resultsレンダリングにリンクするには、検索したいSearch Resultsレンダリングの署名(カンマで区切って)を入力します。例えば、ホテル検索後にポイントオブインタレスト(POI)結果を表示する場合などです。 - **Center On Found POI** – Search Resultsレンダリングで選択したPOIを中央に配置する。 - **Animate Found POI** – Search Results レンダリングで選択したPOIをアニメーション化します。 - **マップスクロール(ドラッグ)を無効** にする – スクロールを無効にする。 - **スクロール時のマップズームを無効** にしてください。ズームを無効にするオプションを選択してください。 4. マップの外観を調整するには、レンダリングにCSSクラスを追加してください。ス **タイリング** セクションで、希望するスタイルを選択します。 5. **ビュー、POI、マップのサイズを管理するには、マップ****ツールバーで「コンポーネントマップアイテムを編集**」をクリックし該当フィールドを編集してください。例えば、地図の衛星ビューを表示し、すべてのPOIを表示するには: ![Example Map](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/0C45B7A7C15E4BB5B3B70285C49E9515.png) 以下のマップレンダリングフィールドを編集できます: **フィールド** **デフォルトオプション** **概要** モード マップモードを選択してください。デフォルトではロードマップモードが選択されています。 ロードマップ 道路と地理のシンプルなビューを表示しています。 衛星 地域の基本的な衛星画像を表示します。 ハイブリッド 地図データと衛星画像を組み合わせています。 自動車(Bing) 標準的なBingマップビューを表示します。 バードアイ(Bing) Bingの航空写真のビューを表示。 セントラルポイントモード 表示する中央ポイントを選択します。 定義された中心点 中央 **点** 経度フィールドと **中心点緯度** フィールドに入力された値を地図の中心点として取ることを選択してください。 現在の所在地 ブラウザがユーザーの現在の位置を判定した際に、この場所が地図の中心点であることを指定することができます。 すべてのPOIが見える 複数の定義された興味点(POI)の間の中心点を計算するために選択してください。このモードを選択していて、定義されたPOIが1つだけの場合、デフォルトのマップズームが取られます(計算するのではなく)。 中心点経度 経度座標を入力して地図の中心点を決定します。例えば: 0.127759 中央点緯度 緯度座標を入力して地図の中心点を決定します。例えば: 51.507361 ズーム 1 - 20 マップの初期ズームレベルを決定するために値を選択してください。ユーザーはページ上でズームレベルを変更できます。 レベル1はマップ全体を表示します。値が高いほどズームも大きくなります。 POI 地図上に表示するPOIを選択します。 ![POIs on the map](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/0ECB18166A1D47A987DCEA8C941F156C.png) 幅 地図の幅をピクセル単位またはパーセンテージで入力します。値を入力しなければ、マップは選択したグリッドシステムの幅を取ります。 高さ 地図の高さをピクセル単位またはパーセンテージで入力してください。値を入力しなければ、マップは選択したグリッドシステムの高さを取ります。 POIタイプからコンポーネントバリアントへのマッピング POIタイプと、それを接続する特定のレンダリングバリアントを選択します。これにより、各マップごとにPOIのビューを異なる方法でカスタマイズできます。例えば、すべての博物館POIをアイコンで表示し、すべての公園を写真で表示できます。 ![POI to variant mapping](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/DD3D647CCF324064A0B53DC7B109F781.png)