Measure Mapヘルプ
Measure Map を開く

ウェブサイトへの地図の埋め込み

プロジェクトの地図を自分のウェブサイトのページに表示し、見た目を選び、表示を許可するウェブサイトを制限する方法を説明します。

埋め込みマップでは、自分のプロジェクトの 1 つを自分のウェブサイトのページ内に表示します。図形、その計測値、価格が付いている場合はその見積もりが表示されます。訪問者はアカウントなしでその場で閲覧でき、もっと広く見たい場合は Measure Map Online で開けます。

会社の Web ページに埋め込まれたプロジェクトの地図

埋め込めるプロジェクト#

ウェブサイトの訪問者に何が表示されるかは、プロジェクトのアクセスレベルによって決まります。

  • 閲覧のみ と パブリック のプロジェクトは、ページに表示されます。訪問者は閲覧できますが、何も変更できません。埋め込みマップでは、プロジェクトのメンバーであっても編集はオフになります。
  • オープンゲスト のプロジェクトは例外で、訪問者はそこで計測し、見積もりを依頼できます。
  • プライベート のプロジェクトは、訪問者には開きません。

埋め込む前に、プロジェクトの共有設定でアクセスレベルを設定してください。

埋め込みコードを取得する#

  1. ダッシュボードで 開発者 を押し、地図を埋め込む を押します。埋め込みには常に本番のキーが使われます。サンドボックスのキーで作成したプロジェクトは、ウェブサイトの訪問者には開けません(本番とサンドボックスを参照)。
  2. iFrame APIキーを取得 で、ページにまだキーが表示されていない場合は 新しいキーを生成 を押します。詳しくはAPI キーを参照してください。
  3. プロジェクトIDを設定 で、プロジェクトを選択 にプロジェクト名の一部を入力し、一覧から選びます。一覧には各プロジェクトの共有方法が表示され、テンプレートとゴミ箱のプロジェクトは含まれません。プライベートのプロジェクトを選ぶと、訪問者が開けないことが警告され、「閲覧のみ」にする が表示されます。
  4. 埋め込みコード で、地図の見た目を選びます。
    • テーマ:自動 は訪問者それぞれのライト・ダークの設定に従います。または、常に ライト か ダーク にします。
    • 単位:自動(訪問者の国) では、米国の訪問者にはヤード・ポンド法、それ以外の訪問者にはメートル法で表示されます。または、常に インペリアル か メトリック にします。
    • 地図タイプ:衛星写真、地図、ハイブリッド、地形図。
    • ページ上の地図の 幅 と 高さ(ピクセル単位、200~2000)。
  5. ライブプレビュー を確認します。
  6. 埋め込みコード の横の を押し、地図を表示したい場所に、ページの HTML にコードを貼り付けます。
「地図を埋め込む」セクション:選んだプロジェクト、選んだ見た目、ライブプレビュー、埋め込みコード

コードには API キーが入っているため、キーを置き換えるまで、キーが許可するウェブサイトで地図は動作し続けます。キーを置き換えた後も、古いキーは 24 時間受け付けられます。その間に新しいコードをページに貼り付けてください。短時間だけ有効なトークンを使うのは、このページの ライブプレビュー だけです。

キーをページにまったく載せたくない場合は、ページが表示されるたびにウェブサイトのサーバーからトークンを取得します。詳しくはキーかトークンかを参照してください。埋め込みアドレスで指定できるすべての設定もそこに一覧があります。

地図を自分のウェブサイトに限定する#

初期設定では、埋め込みはどのウェブサイトでも動作します。他のサイトで自分の地図が表示されないようにするには、開発者 > API キー を押し、ウェブサイトの制限 に example.com のような自分のウェブサイトを追加します。一覧のウェブサイトには、そのサブドメインも含まれます。一覧に 1 つ以上のウェブサイトがあると、それ以外の場所に埋め込まれた地図は開きません。詳しくはキーを自分のウェブサイトに限定するを参照してください。

2 つのウェブサイトが一覧にある「ウェブサイトの制限」

訪問者ができること#

埋め込みマップでは、訪問者は次のことができます。

  • 移動や拡大・縮小をし、図形をクリックして計測値を確認する。
  • プロジェクトに見積もりがある場合は、それを見る。
  • を押して、地図タイプと測定単位を変更する(設定を参照)。
  • 右下隅の Measure Map Online のボタンを押して、新しいタブでプロジェクトを開く。

Open Guest のプロジェクトでは、描画して計測したり、見積もりを依頼 を押して自分の連絡先を送ったりすることもできます。

それ以外の埋め込みマップでは、プロジェクトのメンバーであっても編集はできません。自分のコードから埋め込みを作成する場合や、キーの代わりに短時間だけ有効なトークンを使う場合は、iFrame API を参照してください。

解決しない場合は

サポートチームにメールで、何をしようとしていたかをお知らせください。スクリーンショットがあると助かります。

サポートにメール