はじめに
この文書は、ホームページやウェブサイトにGoogleマップを埋め込む方法を、初心者向けにやさしく解説します。地図を載せることで、来店案内や周辺情報の共有が簡単になり、訪問者にとって分かりやすいサイトを作れます。
対象読者
- 初めてGoogleマップを埋め込む方
- 基本的なHTMLやウェブ編集に慣れているが、地図の扱いに不安がある方
本書で学べること
- Googleマップ埋め込みの基本的な手順
- 用途別の活用例（店舗案内、イベント案内など）
- WordPressや静的サイトなどプラットフォーム別の実装方法
- 埋め込み時の注意点と簡単なカスタマイズ方法
準備するもの
- Googleアカウント（必要な場合があります）
- 簡単なHTML編集ができる環境
各章では手順を丁寧に説明します。まずは次章で、埋め込みの基本概要を確認しましょう。
Googleマップ埋め込みの基本概要
埋め込みとは
Googleマップの埋め込みは、ウェブページ内に地図を表示する仕組みです。HTMLのタグを使って地図をそのままページに表示します。訪問者は別タブを開かずに場所やルートを確認できます。
何ができるか
- 特定の住所や店舗を表示できます。
- 拡大縮小やパン操作がそのまま使えます。
- ルート検索やストリートビューへの切替えも可能な場合があります。
対応プラットフォーム
- 静的HTMLサイト：直接を貼り付けます。
- WordPress：ブロックエディタやカスタムHTMLウィジェットで対応します。
- 他のCMSやEC：多くはHTML編集や専用プラグインで実装できます。
準備するもの（簡単な手順）
- Googleマップで表示したい場所を検索します。
- 共有メニューから「地図を埋め込む」を選びます。
- 表示されたコードをコピーし、ページのHTMLに貼り付けます。
注意点（概要）
- モバイルでの見え方を確認してください。幅や高さを調整する必要があります。
- 表示方法によってはAPIキーが不要な場合と必要な場合があります。
埋め込みの基本的な3ステップ
ステップ1: 場所を検索して正しい表示を確認します
Googleマップで埋め込みたい場所の名称や住所を入力して検索します。表示されたピンや住所が目的の場所と一致しているか、ズームや表示範囲も確認してください。複数候補がある場合は正しいリストや公式ページが開く結果を選びます。
ステップ2: 埋め込み用のコードを取得します
画面の共有（共有アイコン）をクリックし、「地図を埋め込む」タブを選びます。表示される形式のコードをコピーします。サイズを選べる場合は公開先に合わせて選択しますし、カスタムサイズがあれば幅や高さを調整できます。
ステップ3: サイトに貼り付けて公開します
WordPressなら「カスタムHTML」ブロックにコピーしたコードを貼り付けてプレビューし、問題なければ公開します。静的なHTMLサイトでは表示したい位置の内に貼り付けます。スマホ表示を考えるなら、iframeの幅を100%にするか、レスポンシブ対応のラッパーを使うと見やすくなります。
活用方法別の埋め込み機能
基本の地図表示
店舗やオフィスの位置を示すときは、シンプルな地図埋め込みが最も有効です。来店ルートや周辺施設の位置を直感的に伝えられます。例：トップページに店舗の地図を埋め込み、電話番号や営業時間を近くに表示する。
ルート案内の埋め込み
駅やバス停からの経路を示す際は、出発地と目的地を設定したルート表示を埋め込みます。訪問者は実際の移動時間や経路確認ができ、迷う心配を減らせます。例：最寄り駅からの徒歩ルートを表示しておく。
ストリートビューの活用
ストリートビューを埋め込むと、店舗外観や入り口の場所、周辺の雰囲気が伝わります。初めての来店でも安心感を与えやすく、特に飲食店や教室などで効果が高いです。
複数マップの表示
支店が複数ある場合やイベント会場が複数日程ある場合は、各場所ごとに埋め込みコードを取得して個別のブロックに貼り付けます。タブやアコーディオンで切り替え表示にすると見やすくなります。
応用例とヒント
- ピンや説明文を付けて目的地を強調する。
- 営業時間や最寄り出口情報を併記する。
- スマホ表示での見切れをチェックして、適切なサイズに調整する。
プラットフォーム別の実装方法
WordPress
- ブロックエディタなら「カスタムHTML」ブロックを追加し、取得したiframeコードを貼り付けます。クラシックエディタでは「テキスト」モードで同様です。例：
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="(埋め込みURL)" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>
レスポンシブ対応はこのようなラッパーで簡単にできます。
STUDIO
STUDIOでは「Embed（埋め込み）」やマップ用のボックスを追加して、iframeコードを貼り付けます。ボックスの幅や高さをGUIで調整できるため、細かなサイズ設定が楽です。表示崩れが起きたら、埋め込み直下に余白や配置の設定を確認してください。
静的HTMLサイト
HTMLファイルを直接編集して、表示したい場所にiframeを貼り付けます。自由度が高いので、CSSで細かく見た目を整えられます。APIキーやスクリプトを使う場合は、headやbodyに必要なscriptタグを追加してください。
各プラットフォームとも、まずはテスト表示で動作確認を行い、スマホ表示も合わせてチェックしてください。
埋め込み時の注意点とカスタマイズ
サイズ調整とレスポンシブ
iframeのwidth/heightを変更して簡単にサイズ調整できます。スマホ対応にはCSSでアスペクト比を保つ方法が便利です。例：
<div class="map-responsive">
<iframe src="..." frameborder="0" allowfullscreen></iframe>
</div>
.map-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.map-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}
プレビューと表示確認
埋め込み後は必ずプレビューで表示を確認します。ズームレベルや中心位置、ピンの位置、ストリートビューの有無をチェックしてください。見切れや誤表示がないかも確認します。
高度なカスタマイズ
シンプルな埋め込みではURLパラメータで場所やズームを調整できます。追加機能や独自デザインが必要ならGoogle Maps Embed APIやMaps JavaScript APIの利用を検討してください。APIを使うとマーカー追加や地図スタイル変更が可能です。
パフォーマンスとセキュリティ
複数地図の同時読み込みは遅延の原因になります。必要なときだけ読み込む遅延読み込み（lazy loading）を検討してください。APIキーを使う場合はリファラ制限を設定し、利用規約に従ってください。
アクセシビリティ
iframeにtitle属性や代替テキストを付け、キーボード操作での移動を確認しましょう。画面読み上げ利用者への説明文を併記すると親切です。
埋め込みのメリット
視覚的に位置が伝わる
Googleマップをページに埋め込むと、訪問者が地図を見て直感的に場所や周辺環境を把握できます。例えば店舗ページなら、最寄り駅や入り口の向きが文字情報より分かりやすくなります。
ページ内で完結する体験
新しいタブを開かずに地図を確認できるため、離脱が減り操作もスムーズです。問い合わせフォームや予約フォームと同じページに置けば、導線が短くなります。
信頼感と利便性の向上
正確な位置情報が表示されることで、訪問者は安心して来店や訪問を検討できます。住所だけで迷いそうな場所には特に有効です。
事業運営の効率化
複数店舗を扱うサイトでは、個別の地図を埋め込むだけで各店舗の場所を管理できます。地図の状態を更新すれば、情報を簡単に反映できます。
具体例
- 飲食店：ルートや駐車場の場所が分かりやすくなる
- サロン：最寄りのランドマークを示して迷いにくくする
- イベントページ：会場周辺の交通手段や停車位置を案内できる
注意点
地図だけに頼らず、正確な住所や営業時間も併記してください。表示サイズや読み込み速度に配慮すると、より快適な体験になります。
