Skip to content

ウェブサイトにカスタム地図を埋め込む

Web サイトの地図埋め込みコードを数秒で生成します。ルート、円、注釈を含むカスタムの対話型マップを作成し、レスポンシブな iframe をコピーします。

  • API キーは不要
  • レスポンシブ iframe
  • WordPress、Wix、Squarespace、HTML で動作します

このツールの機能

地図の埋め込みコードウェブサイトへの地図埋め込みHTML への地図埋め込みをお探しなら、必要なのは通常、シンプルな位置ピンか、ルート・サービス提供エリア・注釈を表示するカスタム地図のどちらかです。

Draw on a Map は 2 番目のケース用に構築されています。ピンのみを埋め込む代わりに、図面、メモ、ズーム レベルなどを含む、作成した正確なマップの状態を埋め込むことができます。

✦埋め込み方法✦

カスタムマップを埋め込む方法

1
地図を作成する

Draw on a Map を開き、場所を検索して、訪問者に見せたいルート、円、注釈を描きます。

2
iframe を生成する

ツールバーの「共有」の横にある 埋め込む ボタンをクリックします。コードがすぐに生成されます。

3
サイトに貼り付けます

iframe をコピーして、Web サイトの HTML、CMS コード ブロックに貼り付けるか、ウィジェットを埋め込みます。

埋め込み.html
<iframe
  src="https://drawonamap.com/embed/#..."
  title="Draw on a Map embed"
  width="100%"
  height="420"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation"
  allowfullscreen></iframe>
✦これを使用する理由✦

なぜプレーンな埋め込みの代わりにこれを使用するのでしょうか?

🗺

カスタムルートオーバーレイ

人々に見てもらいたい正確な歩行経路、入り口、集合場所、またはサービスエリアを示します。

🔑

API キーは必要ありません

この製品は、ホストされた埋め込みコードを生成します。独自のマップ API を配線する必要はありません。

📍

どこでも使える

会場のページ、不動産のリスト、旅行ガイド、配達ゾーン、イベントの説明など、ピンだけでは不十分な場所ならどこでも。

✦質問✦

よくある質問

これを使用して HTML に地図を埋め込むことはできますか?

はい。 iframe コードをコピーし、HTML テンプレートまたはコード ブロックに直接貼り付けます。

完成した地図を共有したり埋め込んだりできますか?

はい。埋め込みでは、描画、ズーム レベル、地図の位置が作成時とまったく同じように保存されます。

マップを編集するには GIS ソフトウェアが必要ですか?

いいえ。Draw on a Map はブラウザ内で実行され、ホストされた iframe 埋め込みコードを生成します。 GIS ソフトウェアや API キーは必要ありません。

顧客に住所を確認してもらう必要がありますか?

サービス業の場合は、Service Area Widget を使うと、描いた境界線を「この住所はサービス提供エリアですか?」と確認できるウェブサイト用チェッカーにできます。

地図を埋め込む準備はできましたか?

所要時間は約 2 分です。描画し、「埋め込み」をクリックして、コードをコピーします。