ルートとメモをウェブサイトに掲載する

一般的な埋め込み地図には、場所を示すピンが表示されます。しかし、それだけでは来客に脇の入口を案内したり、駅からの道順を伝えたり、お客様に配達範囲を示したりすることはできません。Draw on a Map なら、必要な情報を描き込んでから完成した地図を埋め込めます。API キーもアカウントも必要ありません。

地図を作成して埋め込みコードをコピーする

1. Draw on a Map を開き、目的の場所を検索します。
2. ルートや範囲、矢印、メモを描き込みます。
3. 地図を拡大・縮小したり移動したりして、閲覧者に最初に見せたい表示に合わせます。埋め込んだ地図は、その表示で開きます。
4. 上部のツールバーにある 埋め込む ボタン（</>）を選びます。
5. コードの貼り付け先として、HTML、WordPress、Wix、Squarespace のいずれかを選びます。選んだサービスに合わせた手順がダイアログに表示されます。
6. 高さを設定して、コードをコピーする を選びます。
7. コードをページに貼り付けて公開し、パソコンとスマートフォンでページを確認します。

WordPress では、カスタム HTML ブロックにコードを貼り付けます。Wix では、コードを埋め込む → HTML を埋め込む を追加します。Squarespace では、コード ブロックを追加して HTML に設定します。

埋め込みコードの例

<iframe
  src="https://drawonamap.com/embed/#..."
  title="Draw on a Map 埋め込み"
  width="100%"
  height="420"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation"
  allowfullscreen></iframe>

これはひな形です。実際に使うコードは「この地図を埋め込む」ダイアログからコピーしてください。作成した地図に対応する src が自動で入ります。幅は、地図を配置した列に合わせて調整されます。ページに合わせて地図の高さを変えるには、height を変更してください。

無料の埋め込みには「Powered by Draw on a Map」が表示されます。この表示を削除するには、地図を保存して Pro にアップグレードしてください。

埋め込んだ地図を最新の状態に保つ

コードをコピーする前に、地図をアカウントに保存してください。そうすると、埋め込んだ地図には最後に保存した内容が表示されます。ウェブサイトを変更しなくても、ルートを修正したりマーカーを移動したりできます。

未保存の地図からコピーしたコードでは、描き込みが URL に記録されます。その後に地図を編集しても、埋め込んだ内容は変わりません。編集後は 埋め込む をもう一度開き、新しいコードをコピーして古い iframe と置き換えてください。

読み込んだデータの量が多い場合は、URL に収まりません。「この地図を埋め込む」ダイアログで先に保存するよう案内されたら、地図を保存してから 埋め込む をもう一度開いてください。

地図が表示されない場合

HTML または iframe コードを入力できるブロックを使ってください。ウェブアドレスだけを入力する欄に、iframe のコード全体を貼り付けても機能しません。公開後に地図が消える場合は、ウェブサイト作成サービスが iframe を削除している可能性があります。そのサービスの埋め込みコンテンツに関する設定を確認してください。

ウェブサイトでの地図の活用例

• イベントや結婚式：利用する入口、送迎バスの乗り場、駐車場を1枚の地図に示します。
• 貸別荘や旅行：駅から宿泊先までの徒歩ルートや、ビーチへの近道を描きます。
• サービス業：対応エリアを描きます。訪問者が自分の住所で対応の可否を確認できるようにしたい場合は、有料の Service Area Widget を使うと、描いた境界を基に住所を確認する機能をサイトに追加できます。

ウェブサイト用の地図を作成する

関連ガイド

• 地図に円を描く：正確な半径で配達範囲やサービス提供エリアを示す方法
• Google マップに描き込む：既存の Google マイマップの地図を移してから埋め込む方法
• 自分で描いた徒歩ルートを共有する：経路検索アプリでは正しく案内されないルートを描く方法