HTML(30)地図の表示の仕方について

HTMLを紹介している画像です。 HTML

前回はお問い合わせページの作成について紹介しました。

HTML(29)お問い合わせページの作成の仕方
今回は、お問い合わせページの作成について紹介します。ブログ等を作成するには必須の作業になります。
kamechannel.com
2025.01.08

今回は地図の表示の仕方について紹介したいと思います。

【もっと詳しく知りたい人は是非これを読んでください！！】

1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本）

価格:747円 (2024/12/16 23:17時点) 感想(2件)

HTMLでの地図の表示の仕方

「Webページに地図を載せたいけど、どうやってやるの？」と思ったことはありませんか？この記事では、簡単な方法からカスタマイズまで、地図をHTMLで表示する方法を楽しく説明します。難しい専門用語はなるべく使わずに進めるので、気軽に読んでくださいね。

なぜ地図を載せるの？

まず、「そもそもなんで地図を載せるの？」という話から。理由はいろいろありますが、主にこのような理由があります。

  1. お店やイベント会場を簡単に伝えられる！ 住所をテキストで書くだけだと分かりにくいこともありますよね。でも、地図があれば一目瞭然！
  2. サイトがオシャレに見える！ 地図が載っていると、サイト全体がちょっとプロっぽくなります。ちょっとした工夫で印象アップ。

まずは簡単に地図を埋め込んでみよう

Googleマップを使う方法

Googleマップを使えば、地図を埋め込むのは簡単！以下の手順で試してみましょう。

  1. Googleマップを開く
    ブラウザでGoogleマップを開きます。
  2. 場所を検索
    表示したい場所を検索します。例えば「東京タワー」とか。
  3. 埋め込みコードをコピー
    • 左上のメニュー（三本線）をクリック。
    • 「地図を共有または埋め込む」を選びます。
    • 「地図を埋め込む」タブを選んで、HTMLコードをコピー。
  4. HTMLに貼り付ける
    コピーしたコードを次のようなHTMLファイルに貼り付けましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地図を表示してみよう</title>
</head>
<body>
    <h1>ここに地図があります！</h1>
    <iframe src="埋め込みコードのURL" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</body>
</html>

コツ

  • widthやheightで地図のサイズを調整できます。
  • allowfullscreenで全画面表示も可能に。

もっとカスタマイズしたい！

「埋め込むだけじゃ物足りない！」という場合は、Google Maps PlatformのAPIを使ってみましょう。これなら地図を自由にカスタマイズできます。

Google Maps JavaScript APIを使う方法

  1. APIキーを取得
    • Google Cloud Platformにアクセス。
    • プロジェクトを作成し、「Google Maps JavaScript API」を有効化。
    • APIキーを発行します。
  2. HTMLファイルを作成
    次のようなコードを書いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>オリジナル地図を作ろう！</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=あなたのAPIキー&callback=initMap" async defer></script>
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>カスタム地図を表示</h1>
    <div id="map"></div>

    <script>
        function initMap() {
            const location = { lat: 35.6895, lng: 139.6917 }; // 東京の緯度経度
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 15,
                center: location,
            });
            new google.maps.Marker({
                position: location,
                map: map,
            });
        }
    </script>
</body>
</html>

コツ

  • latとlngに緯度と経度を設定すれば好きな場所を表示できます。
  • zoomを調整して地図の拡大率を変えられます。

地図をさらに見やすく！

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

地図がスマホでもきれいに見えるようにするには、CSSでレスポンシブ対応しましょう。

#map {
    height: 50vh; /* 画面の高さの50% */
    width: 100%;
}

地図のデザインを変える

Google Maps Platformのスタイルウィザードを使うと、地図の色やデザインを簡単に変更できます。これで、サイト全体の雰囲気に合った地図が作れますよ。

気をつけたいポイント

  • APIの利用制限に注意！
    Google Maps APIの無料プランには制限があるので、どれくらい使えるかを確認しておきましょう。
  • データの正確性を保つ！
    地図に表示される情報は定期的にチェックして、最新のものを保つようにしましょう。

まとめ

今回は、HTMLで地図を表示する方法を解説しました！Googleマップをそのまま埋め込む方法から、APIを使ったカスタマイズまで幅広く紹介しました。これを参考に、自分のWebサイトにぴったりの地図を作ってみてくださいね。

参考リンク

以上が地図の表示の仕方についての紹介でした。
次回はSNSの埋め込みについて紹介します。

スポンサーリンク