マップを追加

概要

マップや特定のポイントの場所をサイトに追加する

マップ レンダリングにより、インタラクティブなマップを Web ページのどこにでも簡単に埋め込むことができます。マップ レンダリングを使用する前に、マップ プロバイダーを設定する必要があります。エクスペリエンス エディターで、ツールボックスからページにレンダリングをドラッグして追加できます。

マップ レンダリングをページに追加するには、次の手順に従います。

  1. ツールボックスを開き、[マップ] セクションで、マップレンダリングをクリックします。クリックしてレンダリングのドラッグを開始すると、レンダリングをドロップできるプレースホルダーが青色に点灯します。マップ レンダリングを目的のプレースホルダーの上に配置し、プレースホルダーが点灯したら、レンダリングをページにドロップします。

  2. [関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、ページに表示するマップを選択し、[OK] をクリックします。

    [関連付けられたコンテンツを選択してください。] ダイアログ ボックスを選択します。
  3. [コントロール プロパティ] ダイアログ ボックスの [マップ条件] セクションで、次のフィールドを編集して、マップ条件とスタイルを設定します。

    • [検索結果シグネチャ] – マップ レンダリングを特定の検索結果レンダリングにリンクするには、検索する検索結果レンダリングのシグネチャ (コンマで区切って) を入力します。たとえば、ユーザーがホテルを検索した後に、名所 (POI) の結果を表示する場合が挙げられます。

    • [見つかった POI を中心に配置] – 選択すると、検索結果レンダリングで選択された POI を中心に配置してマップを表示することができます。

    • [見つかった POI をアニメーション化] – 検索結果レンダリングで選択した POI をアニメーション化する場合に選択します。

    • [地図のスクロール (ドラッグ) を無効にする] – スクロールを無効にする場合に選択します。

    • [スクロール時の地図ズームを無効にする] – ズームを無効にする場合に選択します。

  4. マップの外観を調整するには、CSS クラスをレンダリングに追加します。[スタイル] セクションで、必要なスタイルを選択します。

  5. 表示、POI、マップ サイズを管理するには、[マップ] ツールバーで、[コンポーネント マップ アイテムの編集]9930C40F78584AB598A5D6FB6300A096.pngをクリックし、関連するフィールドを編集します。たとえば、マップの衛星ビューを表示し、すべての POI を表示するには、次の手順に従います。

    サンプル マップ

    次のマップ レンダリング フィールドを編集できます。

    フィールド

    既定のオプション

    説明

    モード

    マップ モードを選択します。既定では、ロードマップ モードが選択されています。

    ロードマップ

    道路や地理をわかりやすく表示します。

    衛星

    地域の基本的な衛星画像を表示します。

    ハイブリッド

    マップ データと衛星画像を組み合わせます。

    自動 (Bing)

    標準の Bing マップ ビューを表示します。

    鳥瞰図 (Bing)

    Bing の航空写真ビューを表示します。

    中心点モード

    表示する中心点を選択します。

    定義された中心点

    [中心点経度] フィールドと [中心点緯度] フィールドに入力した値を、マップの中心点にする場合に選択します。

    現在位置

    選択して、ブラウザーがユーザーの現在地を決定するときに、この場所が地図の中心点であることを指定します。

    すべての POI を表示

    いくつかの定義済みの名所 (POI) 間の中心点を計算する場合に選択します。このモードを選択しても、POI が 1 つしか定義されていない場合は、(計算ではなく) 既定のマップ ズームが使用されます。

    中心点経度

    経度座標を入力して、地図の中心点を指定します。例を以下に示します。

    0.127759

    中心点緯度

    緯度座標を入力して、地図の中心点を指定します。例を以下に示します。

    51.507361

    ズーム

    1 - 20

    値を選択して、マップの初期ズーム レベルを指定します。ユーザーはページ上でズーム レベルを変更できます。

    レベル 1 はマップ全体を表示します。値が大きいほど、ズームが大きくなります。

    POI

    マップに表示する POI を選択します。

    マップ上の POI

    マップの幅をピクセルまたは割合で入力します。値を入力しない場合、マップは選択したグリッド システムの幅になります。

    高さ

    マップの高さをピクセル単位または割合で入力します。値を入力しない場合、マップは選択したグリッド システムの高さになります。

    POI タイプからコンポーネント バリアントへのマッピング

    POI タイプとそれを接続する特定のレンダリング バリアントを選択します。これにより、マップごとに異なる POI の表示をカスタマイズできます。たとえば、すべての美術館の POI をアイコンで表示し、すべての公園を写真で表示できます。

    POI からバリアントへのマッピング