HTMLでのインタラクティブな地図の埋め込み – HTMLで始めるホームページ作成

HTMLでのインタラクティブな地図の埋め込み

ホームページを作成する際に、場所の案内やアクセス情報をユーザーに提供するために、インタラクティブな地図を埋め込むことが有効です。さらに、地図を埋め込むことで、視覚的に情報を伝えることができ、ユーザーの理解を促進します。

Googleマップを埋め込む方法

Googleマップを利用することで、簡単に地図をホームページに埋め込むことができます。以下に、その手順を示します。

  1. Googleマップのウェブサイトにアクセスし、表示したい場所を検索します。
  2. 検索結果から目的の場所を見つけ、右クリックして「この場所について」を選択します。
  3. 詳細画面が表示されたら、「共有」をクリックし、「地図を埋め込む」タブを選択します。
  4. <iframe src="URL" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

このコードをコピーし、HTMLの適切な位置に貼り付けます。

地図のカスタマイズ

Googleマップ埋め込みコードをカスタマイズすることで、地図の表示を調整することも可能です。たとえば、地図のサイズやズームレベルを変更することができます。

埋め込みコードの例
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509123!2d144.96305781531586!3d-37.81627937975125!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf57711fae85820!2sFederation+Square!5e0!3m2!1sen!2sau!4v1510910000000" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

OpenStreetMapの利用

Googleマップの代替として、OpenStreetMapを使用することもできます。OpenStreetMapはオープンソースで、カスタマイズ性が高いのが特徴です。

埋め込み方法

OpenStreetMapの埋め込みも非常に簡単です。以下の手順に従ってください。

  1. OpenStreetMapのウェブサイトにアクセスし、表示したい場所を検索します。
  2. 検索結果から目的の場所を選択し、右側のメニューから「共有」をクリックします。
  3. 「HTML」を選択し、表示されたコードをコピーします。
  4. <iframe width="100%" height="350" frameBorder="0" scrolling="no" marginHeight="0" marginWidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=144.955%2C-37.818%2C145.005%2C-37.768&layer=mapnik"></iframe>

このコードをHTMLの適切な場所に貼り付けるだけで、OpenStreetMapの地図が表示されます。

まとめ

地図の埋め込みは、ユーザーに対して視覚的に情報を提供するための強力なツールです。GoogleマップやOpenStreetMapを利用することで、簡単にインタラクティブな地図をホームページに追加することができます。さらに、埋め込みコードをカスタマイズすることで、自分のサイトに最適な地図を作成することも可能です。まずは、簡単な設定から始めてみましょう。

Googleマップ(外部リンク)

OpenStreetMap(外部リンク)

コメントを残す