WebサイトにGoogleマップを埋め込みする簡単3ステップ完全ガイド

2025 12/06

2025/12/06

はじめに

この章では、本ドキュメントの目的と使い方、対象読者をわかりやすく説明します。WebサイトやブログにGoogleマップを埋め込みたい方に向けて、必要な手順を順を追って解説します。

目的

Googleマップを安全かつ簡単に埋め込む方法を身につけること
静的HTMLやWordPressでの実践的な貼り付け方、レスポンシブ対応、応用例まで網羅すること

対象読者

店舗や事務所の所在地を表示したい方
イベント案内やアクセスページを作りたいブログ運営者
HTMLの基本（編集・保存）ができる方。WordPressの管理画面に触ったことがあるとより進めやすいです。

本書の進め方

第2章で最短3ステップの基本手順を提示します
第3章でGoogleマップから埋め込みコードを取得する具体手順を説明します
第4章で静的HTMLとWordPressそれぞれの貼り付け方を実例で示します
第5章でサイズ調整やスマホ対応のポイントを解説します
第6章でルート案内やストリートビューなどの応用例を紹介します

この先は、実際の手順を見ながら進めてください。特別なツールは不要で、ブラウザと編集環境があれば始められます。

WebサイトにGoogleマップを埋め込む基本手順【最短3ステップ】

Googleマップをサイトに載せる最も簡単な方法は、Googleが用意した埋め込み用のHTML（iframe）を貼ることです。専門知識はほとんど不要で、数分で完了します。以下の3ステップで設置できます。

表示したい場所を検索
Googleマップで店名や住所を検索します。正しい位置が表示されているか確認してください。
「共有」→「地図を埋め込む」でコードを取得
共有メニューを開き、「地図を埋め込む」を選ぶとiframeタグが表示されます。これをコピーします。
自分のWebページに貼り付ける
サイトのHTML編集画面に移り、表示させたい箇所にコピーしたiframeを貼り付けます。保存してページを開き、地図が表示されることを確認してください。

ポイント：表示サイズはiframe内のwidth/heightで調整できます。基本機能で足りない場合は別途APIが必要になることがありますが、一般的な埋め込みなら今回の手順で十分です。

Googleマップ側の操作手順：埋め込みコードを取得する

概要

Googleマップ上で表示したい場所を見つけ、共有メニューからiframe形式の埋め込みコードを取得します。手順は短く、初心者でも簡単です。

手順（4ステップ）

場所を検索してマーカー位置を確認・調整
店舗名や住所で検索します。マーカーがずれているときはドラッグで微調整します。正確に表示したければ緯度経度を使う方法もあります。
共有メニューを開く
画面左上またはメニューの“共有”を選びます。共有ダイアログが開きます。
「地図を埋め込む」タブを選択
タブを切り替えると埋め込み用のプレビューとサイズ選択が出ます。通常は小・中・大・カスタムがあり、目的に合わせて選びます。
表示されたHTMLコード（iframe）をコピー
コピーボタンでコードを取得します。CMSやHTMLにそのまま貼り付ければ表示できます。

カスタムサイズの簡単な調整

コピーしたiframe内の width=”…” height=”…” を変更します。%指定やレスポンシブ対応は次章で詳述します。

注意点

埋め込みは基本的にAPIキー不要です。ただし高度な制御やスタイル変更はGoogle Maps Platformを使う必要があります。ページで表示を確認してから公開してください。

HTMLへの貼り付け方：静的HTMLサイトとWordPressの場合

概要

取得した iframe コードはサイト構成で貼り付け方が変わります。本章では静的HTMLサイトとWordPressそれぞれの具体手順を分かりやすく説明します。

静的HTMLサイトでの貼り付け手順

対象ページのHTMLファイルをテキストエディタで開きます。
地図を表示したい場所（通常は内）を探します。
取得したiframeコードをその位置に貼り付けます。
例：

<div class="map">
  <!-- ここにGoogleマップのiframeを貼る -->
  <iframe src="..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

保存してサーバーへアップロード、ブラウザで表示確認します。

ポイント：widthはpx指定か100%に変更できます。heightは見やすさに合わせ調整してください。

WordPressでの貼り付け手順

ブロックエディタ(Gutenberg)：投稿・固定ページ編集で「カスタムHTML」ブロックを追加し、iframeを貼り付けます。プレビューで表示を確認します。
クラシックエディタ：エディタの「テキスト」タブに切り替え、iframeを貼って更新します。
テーマやページビルダー：HTMLウィジェットやコード要素を使って貼り付けます。ウィジェットエリアへ入れる場合は「外観」→「ウィジェット」から設定します。

注意点：iframe内にタグなど不要なコードが混じっていないか確認してください。公開後はスマホやPCで表示を確認し、必要なら幅や高さを調整してください。

デザイン調整：サイズ指定とレスポンシブ対応のポイント

スマホでGoogleマップを表示すると、デフォルトのiframe（例：width=”600″ height=”450″）で横スクロールが出ることがあります。ここでは崩れにくい表示にする二つの手法と注意点を分かりやすく説明します。

方法1：親要素に固定サイズを与え、iframeを幅・高さ100%にする

親要素に高さ・幅をCSSで指定し、iframeに幅100%、高さ100%を適用します。親に高さがないと高さ100%が効かない点に注意してください。

例：

<div class="map-box" style="width:100%; max-width:800px; height:450px;">
  <iframe src="..." style="width:100%; height:100%; border:0;" allowfullscreen loading="lazy"></iframe>
</div>

方法2：比率ベース（アスペクト比維持）でレスポンシブにする

親要素にposition:relative; padding-bottom:56.25%;（16:9）などを与え、iframeをposition:absoluteで広げます。高さは比率で決まるため画面サイズに応じて崩れにくくなります。

例：

<div class="map-responsive" style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
  <iframe src="..." style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" loading="lazy" title="地図"></iframe>
</div>

CSSの新しい書き方としてaspect-ratioプロパティ（例：aspect-ratio:16/9;）を使う方法もあります。どちらの手法でも、max-width:100%を併用して横幅のはみ出しを防ぎ、iframeにtitle属性やloading=”lazy”を付けて使い勝手を高めてください。

店舗・会社サイトでよく使う応用：ルート案内とストリートビュー

ルート案内を設置する方法

よく使うのは次の二通りです。

1) 埋め込みマップ（経路設定した状態）
– Googleマップで「経路」を入力し、出発地と到着地を設定します。
– 画面のメニューから「共有」→「地図を埋め込む（または埋め込みコードを取得）」を選びます。
– 表示されたiframeコードをコピーして、自サイトのHTMLに貼り付けます。

2) 経路リンクのボタン（確実で簡単）
– 経路を直接開くURLを作成します。例:
https://www.google.com/maps/dir/?api=1&origin=東京駅&destination=渋谷駅&travelmode=driving
– ボタンにリンクを設定し、target=”_blank” rel=”noopener”を付けて新しいタブで開くようにします。
– この方法は埋め込みが制限されている場合にも有効です。