HTMLで地図を埋め込む方法5選！

はじめに
●HTMLと地図埋め込みの基本
- ○地図埋め込みとは何か？
- ○必要なHTML知識の概要
●地図埋め込みの具体的な方法
●地図を埋め込む際の注意点
- ○レスポンシブデザインの対応
- ○アクセスキーの管理
●地図埋め込みの応用例
- ○サンプルコード6：交通情報を表示する
- ○サンプルコード7：ユーザーの位置情報を反映した地図
まとめ

はじめに

Webサイトに地図を埋め込むことは、訪問者にとって非常に有用です。

特に、実店舗を持つビジネスでは、訪問者が物理的な場所を簡単に見つけられるようにするために重要です。

しかし、プログラミングの初心者にとっては、HTMLを使って地図を埋め込むプロセスが複雑に感じられるかもしれません。

この記事では、HTMLを使用して地図を簡単に埋め込む方法を、初心者でも理解しやすい形で段階的に解説していきます。

●HTMLと地図埋め込みの基本

まず、HTMLの基本的な構造から理解を深めていきましょう。

HTML（HyperText Markup Language）は、ウェブページを作成するための標準的なマークアップ言語です。

ウェブページの骨組みを形成し、テキストや画像、リンクなどのコンテンツをブラウザに表示する役割を担います。

○地図埋め込みとは何か？

地図を埋め込むとは、ウェブページ内に直接、地図を表示させることを指します。

多くの場合、Google MapsやOpenStreetMapなどのサービスを利用して、特定の場所を表す地図をウェブページ上に表示させることができます。

これにより、ユーザーは追加のアプリケーションを使用することなく、直接ウェブサイト上で地図を利用できるようになります。

○必要なHTML知識の概要

地図を埋め込むには、基本的なHTMLタグを理解している必要があります。特に、<iframe>タグの使用方法を覚えることが重要です。

<iframe>は、インラインフレームを指し、一つのHTMLドキュメント内に別のHTMLドキュメントを埋め込むために使われます。

地図を埋め込む際には、地図サービスが提供する埋め込みコードを<iframe>タグ内に貼り付けることで、簡単に地図を表示させることができます。

次に、この<iframe>タグを使用した具体的なサンプルコードとその解説を行います。

●地図埋め込みの具体的な方法

先ほど解説した<iframe>を利用した基本的な方法から進んで、実際に複数の地図サービスを使って地図を埋め込む具体的な手順について説明します。

各サービスごとに異なる特徴があり、それぞれに適した使用方法を把握することが重要です。

○サンプルコード1：Google Mapsを使う

Google Mapsは、最も広く使用されている地図サービスの一つです。

このサービスを使用して地図を埋め込む場合、Google Mapsのウェブサイトから「共有」セクションにアクセスし、「地図を埋め込む」オプションを選択します。

そこで表示されるHTMLコードをコピーして、自分のウェブページの適切な場所に貼り付けます。

例えば、次のような形です。

<iframe
  width="600"
  height="450"
  style="border:0"
  loading="lazy"
  allowfullscreen
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.8962340000003!2d-122.0842499!3d37.4219999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb5d422b6f1f1%3A0x2bd7dfeb9e43f366!2sGoogleplex!5e0!3m2!1sen!2sus!4v1617765204726!5m2!1sen!2sus">
</iframe>

このコードはGoogleplexの場所を示すGoogle Mapsをページに埋め込みます。

サイズやスタイルはstyle属性を編集することで調整可能です。

○サンプルコード2：OpenStreetMapを使う

OpenStreetMapは無料で使える地図データベースで、APIを通じて地図データを自由に使用することが可能です。

地図を埋め込む基本的な方法は、LeafletというJavaScriptライブラリを使用することです。

HTMLページに下記のコードを追加することで、地図を表示できます。

<div id="osm-map" style="width: 100%; height: 400px;"></div>
<script>
  var map = L.map('osm-map').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19
  }).addTo(map);
</script>

このサンプルでは、地図の中心をロンドンに設定し、ズームレベルを13にしています。

<div>タグ内に表示される地図のサイズはスタイルで調整可能です。

○サンプルコード3：Bing Mapsを利用する

MicrosoftのBing Mapsも地図サービスの一つで、埋め込み方法はGoogle Mapsと似ています。

Bing Maps Dev Centerから提供される埋め込みコードをウェブページに貼り付けるだけです。

<iframe src="https://www.bing.com/maps/embed?h=400&w=500&cp=47.676830~-122.109370&lvl=12&typ=d&sty=r&src=SHELL&FORM=MBEDV8" scrolling="no">
</iframe>

このiframeタグは、指定された座標のBing Mapsを表示し、サイズやスクロール設定をカスタマイズできます。

○サンプルコード4：Mapboxを使用する

Mapboxは高度なカスタマイズが可能な地図サービスで、独自のスタイルや機能を地図に追加できます。

Mapboxを使用するには、まずMapboxのアカウントを作成し、適切なAPIキーを取得します。

HTMLに次のコードを挿入します。

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'Your_Mapbox_Access_Token_Here';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40], // 経度、緯度
zoom: 9
});
</script>

このコードは、指定されたスタイルでMapbox地図を表示し、さまざまなオプションでカスタマイズ可能です。

○サンプルコード5：カスタム地図を作成して埋め込む

独自の地図を作成してウェブサイトに埋め込むには、JavaScriptライブラリの一つであるLeafletを使用すると良いでしょう。

自分で地図データを管理し、特定のデータを強調表示するカスタム地図を作成できます。

<div id="custom-map" style="width: 100%; height: 500px;"></div>
<script>
var customMap = L.map('custom-map').setView([35.6895, 139.6917], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(customMap);
// ここにカスタムデータを追加するコードを挿入
</script>

このサンプルでは、東京の中心部を表示する地図を作成しています。

これにより、特定のプロジェクトに合わせたカスタマイズが可能になります。

●地図を埋め込む際の注意点

地図をウェブページに埋め込む際には、いくつかの重要な注意点があります。

これらの注意を怠ると、ユーザー体験の低下や技術的な問題が発生する可能性があります。

最も一般的な注意点を把握し、適切な対策を講じましょう。

○レスポンシブデザインの対応

まず、レスポンシブデザインの対応が挙げられます。

現代のウェブサイトは、さまざまなデバイスで適切に表示されるように設計されているため、埋め込まれた地図もまた、それに準じた挙動を表す必要があります。

地図がレスポンシブでない場合、特定のデバイスで見たときに不自然に見えたり、操作が困難になることがあります。

そのためには、地図のコンテナに対してパーセンテージで幅を設定する方法や、メディアクエリを使用してデバイスのサイズに応じたスタイルを適用する方法が推奨されます。

ここでは、レスポンシブデザインに適した地図の埋め込み例を紹介します。

<style>
  #responsive-map {
    width: 100%;
    height: 400px;
  }
</style>
<div id="responsive-map"></div>
<script>
  var map = L.map('responsive-map').setView([35.6895, 139.6917], 10);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
</script>

このコードでは、地図のコンテナ#responsive-mapに対して、幅を100%に設定しています。

これにより、親要素のサイズ変更に応じて地図のサイズも動的に変更され、さまざまな画面サイズに対応可能です。

○アクセスキーの管理

多くの地図サービスでは、APIを利用するためにアクセスキーが必要になります。

このアクセスキーは、外部に漏れると不正利用されるリスクがあります。

特に、公開されたウェブサイトにアクセスキーをそのまま記載してしまうと、そのキーを使って第三者が有料サービスを利用するなどの問題が発生する可能性があります。

アクセスキーの管理には、最低限、公開されたスクリプトファイルにキーを直書きせず、環境変数や設定ファイルから読み込むようにすることが重要です。

また、使用するAPIに応じてリクエスト制限を設けることで、意図しない大量のリクエストが送られることを防ぐことができます。

サーバーサイドでキーを管理し、クライアントにはトークンのみを渡す方法も有効です。

●地図埋め込みの応用例

地図をウェブサイトに埋め込む技術は多岐にわたる用途に活用できます。

ここでは、より実用的な応用例を紹介し、どのように地図がビジネスやサービスを向上させるかを探ります。

先ほどは基本的な埋め込み方法について解説しましたが、今度は具体的な応用例を通じて、地図埋め込み技術の可能性を広げる方法を見ていきましょう。

○サンプルコード6：交通情報を表示する

リアルタイムの交通情報を地図上に表示することは、ユーザーにとって非常に価値のある情報です。

例えば、Google Maps APIを使用して、特定のルートの交通状況を地図上に視覚化することが可能です。

下記のサンプルコードは、特定の地点の交通情報を取得し、地図上に表示する方法を表しています。

<div id="map" style="width: 100%; height: 400px;"></div>
<script>
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: {lat: 35.681236, lng: 139.767125} // 東京駅の座標
    });

    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

このコードは、東京駅周辺の地図に交通状況をオーバーレイとして加えています。

ユーザーはこの情報を利用して、渋滞を避けるルートを選択することができます。

○サンプルコード7：ユーザーの位置情報を反映した地図

ウェブアプリケーションにおいてユーザーの現在地を地図上に表示する機能は、ローカルサービスの提供に非常に効果的です。

例えば、ユーザーが最寄りの店舗を簡単に見つけられるようにするために、ユーザーの現在位置から地図上にポイントを表示します。

下記のJavaScriptコードは、ユーザーの現在位置を取得し、それをMapboxの地図上にマーカーとして表示する例です。

<div id="map" style="width: 100%; height: 300px;"></div>
<script>
mapboxgl.accessToken = 'Your_Mapbox_Access_Token_Here';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-122.420679, 37.772537], // サンフランシスコの座標
    zoom: 13
});

navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    new mapboxgl.Marker()
        .setLngLat([lng, lat])
        .addTo(map);
});
</script>

このコードでは、ブラウザの位置情報機能を使ってユーザーの現在地を取得し、その位置にマーカーを設置しています。

これにより、ユーザーは自分がいる場所と関連する情報を直感的に理解することができます。