Measure Mapヘルプ
Measure Map を開く

iFrame API

自分のプロジェクトを、サイトに合った単位、地図のスタイル、テーマで、自分のウェブサイトにライブの地図として表示する方法を説明します。

iFrame API を使うと、プロジェクトの地図を自分の Web ページに表示できます。訪問者は、アカウントなしで、サイトを離れることなく、計測値の入った衛星地図を見て、地図を動かせます。プロジェクト、単位、地図のスタイル、配色のテーマを選べます。

始める前に#

  • 埋め込みマップ のアクセス権を持つ 本番の API キー。詳しくはAPI キーを参照してください。
  • 訪問者が見てもよいプロジェクト。アクセスレベルを 閲覧のみ または パブリック にします。プライベート のプロジェクトは、アカウントのない訪問者には開きません。詳しくは埋め込めるプロジェクトを参照してください。
  • 必要に応じて、キーのウェブサイトの制限。埋め込みが自分のサイトでだけ動作するようにします。詳しくはAPI キーを参照してください。

埋め込みコードを作成する#

開発者 > 地図を埋め込む で、本番のキーを使ってコードを作成できます。プロジェクトを選び、テーマ、単位、地図タイプ、サイズを選び、ライブプレビュー を確認して、埋め込みコード をコピーします。プロジェクトがプライベートの場合は、その旨が表示され、「閲覧のみ」にする が表示されます。各手順については埋め込みコードを取得するを参照してください。

プロジェクトを選び、ライブプレビューが表示された「地図を埋め込む」

コードにはキーが入っているため、キーを置き換えるまで動作し続けます。キーはページのソースで誰でも読み取れるため、キーが 埋め込みマップ 以上のことをできる場合と、キーにウェブサイトの制限がない場合は、このセクションに警告が表示されます。短時間だけ有効なトークンを使うのは ライブプレビュー だけです。詳しくはキーかトークンかを参照してください。

埋め込みアドレス#

埋め込みは <iframe> で、そのアドレスは https://app.measuremaponline.com/iframe_api で始まり、その後に次のパラメーターが続きます。

パラメーター 必須かどうか 値
pid 必須 プロジェクトの識別子。アプリでのプロジェクトのアドレスの /p/ の後の部分です。
key key または token API キー。
token key または token サーバーから取得したトークン（後述）。
ms 任意 単位：metric または imperial。指定しない場合、米国の訪問者にはヤード・ポンド法、それ以外の訪問者にはメートル法で表示されます。
maptype 任意 satellite（既定）、map、hybrid、terrain。
theme 任意 auto（既定：訪問者のシステムの設定に従う）、light、dark。

最小限の例#

<iframe src="https://app.measuremaponline.com/iframe_api?pid=YOUR_PROJECT_ID&key=YOUR_API_KEY&maptype=satellite&theme=auto"
  title="YOUR_PROJECT_NAME" width="500" height="500" style="border:0" allow="fullscreen"></iframe>

YOUR_PROJECT_ID、YOUR_API_KEY、YOUR_PROJECT_NAME を置き換え（title はスクリーンリーダーが読み上げます）、幅と高さをページに合わせて設定します。

コピーボタン付きの埋め込みコード

キーかトークンか#

key を使う場合（地図を埋め込む セクションで作成されるコードと同じです）、埋め込みはキーが有効な限り、キーの制限が許可するウェブサイトで動作し続けます。ただし、キーがページのソースに表示されるため、次のようにしてください。

  • 埋め込みマップ のアクセス権だけを持つキーを使う。
  • キーを自分のウェブサイトに限定する。
  • キーを置き換えたら、古いキーが動作する 24 時間以内にページを更新する。

token を使う場合、キーはサーバーに置いたままです。訪問のたびに自分のサーバーが埋め込みをページに書き出す場合に向いています。ページを表示する前に、サーバーが REST API にトークンを要求し、それを iframe のアドレスに入れます。

  • POST https://api.measuremaponline.com/api/v2/auth/iframe/token に、Authorization ヘッダーにキーを入れて送ると、60 分間有効な token が返されます。
  • POST https://api.measuremaponline.com/api/v2/auth/token も同じ働きをし、最大 24 時間までの duration（秒）を指定できます。応答には、トークンの有効期限が含まれます。

アカウントで取得できるトークンは、1 時間あたり 600 個までです。本番のキーを使ってください。埋め込みに表示されるのは本番のプロジェクトだけなので、サンドボックスのキーで作成したトークンでは地図が開きません。詳しくはAPI リファレンスを参照してください。

訪問者ができること#

訪問者は、地図の移動や拡大・縮小をし、図形の計測値を確認できます。何も変更はできません。プロジェクトのアクセスレベルにかかわらず、埋め込みでは編集がオフになります。唯一の例外は Open Guest プランの Open Guest のプロジェクトで、訪問者が自分で計測します。

地図が表示されない場合#

次の順に確認してください。

  • アドレスの token の有効期限が切れている。サーバーがより長い期間を要求しない限り、トークンの有効期間は 60 分です。キーを使う 地図を埋め込む からコードをもう一度コピーするか、訪問のたびにサーバーで新しいトークンを取得してください（前述を参照）。
  • プロジェクトがプライベートになっている。閲覧のみ または パブリック にするか、地図を埋め込む で 「閲覧のみ」にする を押してください。
  • ウェブサイトが許可されていない。キーにウェブサイトの制限がある場合、埋め込みを表示するページは、そのいずれかにある必要があります。ブラウザやサイトによっては、埋め込みがどのページにあるかを隠すことがあります。制限を設定している場合、そのような埋め込みは拒否されます。
  • キーが置き換えられた。古いキーは、新しいキーの作成から 24 時間後に、失効させた場合はすぐに、使えなくなります。
  • キーがサンドボックスのキーである。埋め込みは、本番のキーと本番のプロジェクトでだけ動作します。
  • サブスクリプションが有効でない、または API アクセスが停止されている。API キー セクションにその旨が表示されます。

解決しない場合は

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

サポートにメール