HTMLにGoogleMapを埋め込む方法を画像付きで解説!

サイト内に運営者の情報を載せる場合や、記事コンテンツでお店を取り扱った場合などに地図も載せていると、ユーザーはいちいち自分でマップを開いて住所を調べる必要がないので、ユーザビリティの高いサイトになります。

本記事ではHTMLにGoogleMapを埋め込む方法を、画像付きで丁寧に解説していきます。画像は少し多いですが手順は非常に簡単です。一度覚えてしまえば簡単に再現できるようになるので、ぜひ一緒に手を動かして見てください。

【基礎編】HTMLにGoogleMapを埋め込む

では早速、HTMLにGoogleMapを埋め込む手順を解説していきます。本記事内では東京駅の位置情報を埋め込みますが、任意の場所を選択して構いません。

まずはGoogleMapを開き、「東京駅」と検索します。

次は検索窓の左側にある3本線のマーク(メニュー)を開きます。画像内では赤枠で囲んでいます。すると下の画像のようなメニューが出てきます。

そして上の画像の赤枠で囲んだ「地図を共有または埋め込む」を選択してください。すると以下のようなポップアップが、画面中央に表示されます。

デフォルトで「リンクを共有する」が選択されているので、「地図を埋め込む」を開きます。すると、次の画像のような表示になります。

<iframe〜>がHTMLファイルに埋め込むコードなのですが、もしこの時点でサイズを変更したいのであれば、コード左側にある「中」と書かれたところから表示サイズを変更することができます。今回は「中」のまま、赤矢印で示した「HTMLをコピー」をします。

では、次はマップを埋め込むHTMLファイルを開きます。そして、埋め込みたい場所にペーストします。

上のように記述した埋め込んだ場合、次の画像のような表示になります。

以上で埋め込みの流れは終了ですが、もし埋め込んだ後にサイズを変更したいと思った場合は、いちいちサイズを変更したコードを再度コピー&ペーストする必要はなく、iframeタグ内の記述を変更することでも可能です。

iframeタグには長々と文字が並んでいますが、最後の方にwidthとheightを変更できる箇所があります。

この値をwidth=”100”、height=”100”に変更すると、小さい正方形のマップになります。

【応用編】ルート表示付きのマップを埋め込む

前の見出しでは、特定の場所にピンが立つようにGoogleMapを埋め込みました。しかし普段GoogleMapを使うとき、目的地までのルートを表示することが多いのではないでしょうか。実は、HTMLにはルート付きのマップを埋め込むことも可能なのです。

以降、ルート付きマップを埋め込む方法を追って説明しますが、基本的には前の見出しで説明した流れと同じで、「GoogleMapでHTMLをコピー」→「HTMLファイルの任意の場所に埋め込む」となります。

今回は、「新宿駅」から「東京都庁」のルートで説明します。まずはGoogleMapで新宿駅を検索しましょう。

次は、上の画像のうち赤枠で囲んだ「ルート・乗換」を選択します。

トップ候補に挙がってきた「東京都庁」を選択します。もし出発地が「新宿駅」になっていなければ、検索欄右にある矢印のマークをクリックすると、出発地と目的地を入れ替えることができます。

出発地・目的地の設定が完了すると、次の画像のようにルートが表示されます。

ルートが問題無く表示されたら、左上隅の赤枠で囲んだメニューを開きます。

ここからは【基礎編】と同じ流れです。まず、「地図を共有または埋め込む」を選択します。ポップアップが表示されたら、「地図を埋め込む」に移動し、「HTMLをコピー」しましょう。

マップを埋め込むHTMLファイルを開き、コピーしたコードを任意の場所にペーストします。今回は次のように記述しました。

h1タグで「新宿駅から東京都庁」という見出しを付けています。これをブラウザで確認すると次のようになります。

まとめ

本記事ではGoogleMapをHTMLに埋め込む方法を解説しました。お店を紹介した場合などにマップも置いておくと、ユーザーが使いやすいサイトに様変わりします。手順を覚えてしまえば、1つのマップを埋め込むのに2〜3分で終わるので、今回は読むだけだった人も、ぜひ一度試してみることをおすすめします。