Googleマップをホームページに埋め込むには、パソコンのブラウザでGoogleマップを開き、「共有」から「地図を埋め込む」を選んで表示されるHTML（iframeのコード）をコピーし、ページに貼り付けます。費用はかからず、APIキーも要りません。この記事では、コードの取り方から、WordPressでの貼り方、スマホで地図がはみ出さないようにするCSS、表示されないときやピンの位置がずれるときの直し方まで、順番に説明します。

Googleマップの埋め込みでできること

埋め込みは、Googleマップの地図をそのまま自社のページの中に表示する仕組みです。訪問者はページを離れずに場所を確かめられ、地図の中のリンクからGoogleマップのアプリやサイトを開いて経路検索にも進めます。

埋め込み地図で訪問者ができること

• 地図の拡大・縮小、ドラッグでの移動
• 「拡大地図を表示」から、Googleマップ本体で場所を開く
• 「ルート」から、現在地からの経路を調べる（Googleマップ側で開く）
• 店舗やオフィスとして登録されている場所なら、名前・住所・クチコミの件数などの表示

埋め込みの方法は2種類ある

Googleマップを載せる方法は、大きく分けて「共有メニューの埋め込みコードを貼る方法」と「Maps Embed API などのAPIを使う方法」があります。会社案内やアクセスページに1か所の地図を載せるだけなら、前者で十分です。複数の店舗をまとめて表示したい、地図の見た目を細かく変えたいといった場合はAPIを使いますが、Google Cloud でのキーの発行や設定が必要になります。

APIの料金や無料の範囲は変わることがあるため、使う場合は Google Maps Platform の公式サイトで最新の内容をご確認ください。この記事では、ほとんどのホームページで使われている「共有メニューの埋め込みコード」を中心に説明します。

埋め込みコードを取得する手順

埋め込みコードは、パソコンのブラウザで開いたGoogleマップから取得します。スマートフォンのGoogleマップアプリの「共有」では地図のURLは送れますが、埋め込み用のHTMLは表示されません。作業はパソコンで行いましょう。

ステップ1｜Googleマップで場所を表示する

パソコンのブラウザで Googleマップ（https://www.google.com/maps）を開き、検索窓に会社名・店名、または住所を入れて検索します。店舗やオフィスとして登録されている場所が見つかれば、左側に名前や営業時間などの情報欄が開きます。登録がない場合は住所で検索すると、その地点にピンが立ちます。

ステップ2｜「共有」を開く

左側の情報欄にある「共有」ボタンを押します。住所で検索した場合も、同じ位置に「共有」があります。共有の画面には「リンクを送信する」と「地図を埋め込む」の2つのタブがあります。

ステップ3｜「地図を埋め込む」でサイズを選ぶ

「地図を埋め込む」タブを開くと、地図のプレビューとサイズの選択欄が出ます。サイズは「小」「中」「大」「カスタムサイズ」から選べます。あとからCSSで幅を調整できるので、ここでは「中」のままで構いません。

ステップ4｜「HTMLをコピー」を押す

「HTMLをコピー」を押すと、iframe のコードがコピーされます。コードには、地図の場所を表す長いURL、幅（width）と高さ（height）、枠線をなくす指定、遅延読み込み（loading=”lazy”）などが含まれています。コードの中身は書き換えず、そのまま貼り付けに使います。

店名で表示するか、住所で表示するか

店舗として登録された場所を選んでコードを作ると、地図の左上に店名やクチコミの件数が表示されます。住所で作ると、ピンと住所だけのシンプルな表示になります。Googleビジネスプロフィールに登録している会社や店舗は、店名で作ったほうが、訪問者が地図からそのままクチコミや営業時間を確認できて便利です。

WordPressに地図を貼る方法

WordPressでは、使っているエディタによって貼る場所が違います。どちらの場合も「HTMLとして貼る」のがポイントで、通常の文章の入力欄に貼るとコードが文字として表示されてしまいます。

ブロックエディタ（Gutenberg）で貼る手順

1. 地図を入れたい位置で「＋」を押し、「カスタムHTML」ブロックを追加する
2. ブロックの中にコピーしたコードを貼り付ける
3. ブロックのツールバーの「プレビュー」で、地図が表示されるか確かめる
4. 記事やページを更新する

「埋め込み」ブロックにGoogleマップのURLを入れても、地図は表示されません。Googleマップはこのブロックの対応サービスに入っていないためです。必ず「カスタムHTML」ブロックを使います。

クラシックエディタで貼る手順

クラシックエディタでは、編集画面の右上にある「テキスト」タブに切り替えてから貼ります。「ビジュアル」タブのまま貼ると、コードが文章として扱われます。貼り付けたあとに「ビジュアル」タブへ戻すと、環境によってはコードが崩れることがあるため、地図を貼ったページは「テキスト」タブで編集を続けるほうが安全です。

テーマやページビルダーを使っている場合

Elementor などのページビルダーには「HTML」や「Googleマップ」のウィジェットがあります。「HTML」ウィジェットに埋め込みコードを貼るか、「Googleマップ」ウィジェットに住所を入れて表示します。テーマによっては、会社概要やフッターに地図の入力欄が用意されていることもあるので、テーマの説明書も確認してみてください。

ウィジェット（サイドバー・フッター）に置く場合

サイドバーやフッターに地図を置きたいときは、「外観」→「ウィジェット」で「カスタムHTML」を追加し、同じようにコードを貼ります。ブロックテーマの場合は「外観」→「エディター」でフッターのテンプレートパーツを開き、「カスタムHTML」ブロックを使います。

スマホで崩れないようにするCSS

埋め込みコードには幅と高さが数値（例: width=”600″）で入っているため、そのままだと画面の狭いスマートフォンで地図がはみ出すことがあります。幅を画面に合わせる指定を足すと、どの端末でも収まるようになります。

幅を100%にするだけの簡単な方法

いちばん簡単なのは、iframe に「横幅いっぱい」の指定を足す方法です。追加CSSに次の内容を入れます。

.map-wrap iframe { width: 100%; height: 400px; border: 0; }

貼り付けるコードは、<div class="map-wrap"> と </div> で囲みます。WordPressでは「外観」→「カスタマイズ」→「追加CSS」（ブロックテーマでは「外観」→「エディター」→「スタイル」→「追加CSS」）にCSSを入れられます。

縦横比を保つ方法（aspect-ratio）

高さを固定すると、パソコンでは横長、スマートフォンでは縦長に見え方が変わります。どの幅でも同じ比率で表示したい場合は、aspect-ratio を使います。

.map-wrap iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

スマートフォンでは地図が小さくなりすぎることがあるので、アクセスページの地図は 4 / 3 くらいの比率にするか、画面幅が狭いときだけ高さを指定し直すのも一つの方法です。

高さの目安

数値はあくまで目安です。地図の上下に住所や最寄り駅の説明を置くと、地図が小さくても場所が伝わりやすくなります。

表示速度への配慮

Googleマップの埋め込みは、表示のたびに外部のファイルをいくつも読み込みます。ページの下のほうにある地図なら影響は小さいものの、ページの最初に置くと表示が重く感じられることがあります。

遅延読み込み（loading=”lazy”）を確認する

現在の埋め込みコードには、はじめから loading=”lazy” が入っています。これは、地図が画面に近づくまで読み込みを待つ指定です。古いコードを使い回している場合は入っていないことがあるので、コードの中に loading=”lazy” があるか確かめ、なければ取り直すか書き足します。

ページの最初に地図を置かない

アクセスページでも、ページを開いてすぐ見える位置（ファーストビュー）には住所・最寄り駅・電話番号などの文字情報を置き、地図はその下に置くのがおすすめです。制作の現場では、地図をファーストビューに置いたページで表示速度の点数が下がる例をよく見かけます。文字情報が先に読めれば、地図の読み込みを待たずに必要なことが伝わります。

地図の画像とリンクに置き換える方法

表示速度をとくに重視するページでは、地図の画像（スクリーンショット）を置き、画像からGoogleマップのURLへリンクする方法もあります。ただし画像は動かせず、場所が変わったときの差し替えも必要です。訪問者の使いやすさとのバランスで選びます。

表示されないときのトラブル対処

地図が表示されない、または意図した場所が出ない場合は、多くがコードの貼り方か、場所の指定の問題です。症状ごとに確認する順番をまとめます。

コードが文字として表示される

文章の入力欄（段落ブロックやビジュアルタブ）に貼っている状態です。「カスタムHTML」ブロック、またはクラシックエディタの「テキスト」タブに貼り直します。

地図の枠だけで中身が空白になる

次の順で確かめます。

1. コードが途中で切れていないか（最後が </iframe> で終わっているか）
2. セキュリティ系のプラグインやサーバーの設定で、外部の iframe を止めていないか
3. 広告ブロックなどのブラウザ拡張機能を一時的に止めると表示されるか
4. 別のブラウザやスマートフォンで見ても同じか

自分の環境だけで表示されない場合は、ブラウザ側の問題です。どの環境でも表示されない場合は、プラグインやサーバー側の設定を確認します。

保存すると地図が消える

WordPressで、管理者以外の権限（編集者など）のユーザーが保存すると、セキュリティのために iframe が取り除かれることがあります。サイトの設定によって挙動が違うため、管理者権限のユーザーで貼り直してみてください。

ピンの位置がずれている・別の場所が出る

住所で検索した場所が建物の入口とずれている、同じ名前の別の店舗が出るといった場合は、地図の元になる場所を選び直します。Googleマップで正しい店舗の情報欄を開いてからコードを取り直すと解決することがほとんどです。お店やオフィスのピン自体がずれている場合は、Googleマップで「情報の修正を提案」するか、Googleビジネスプロフィールのオーナーなら管理画面から位置を直します。

地図の表示が英語になる

コードのURLの中にある言語の指定が英語（hl=en など）になっていることがあります。Googleマップの表示言語を日本語にした状態でコードを取り直すと、日本語で表示されます。

地図と一緒に載せておきたい情報

地図は場所を見せる道具ですが、それだけでは「どう行けばよいか」までは伝わりません。アクセスページでは、地図の前後に次のような情報を文字で添えると親切です。

文字で書いておく項目

• 住所（郵便番号・建物名・階数まで）
• 最寄り駅と出口、徒歩の分数
• 駐車場の有無と場所、近くのコインパーキング
• 目印になる建物や看板の色
• 営業時間・定休日、来社の予約が必要かどうか

写真を添えると迷いにくい

建物の外観や入口、エレベーターの位置などの写真を添えると、初めて来る人が迷いにくくなります。ビルの中にある事務所や、路地の奥にある店舗ではとくに効果があります。

Googleビジネスプロフィールの情報とそろえる

ホームページの住所・営業時間と、Googleマップに出る情報が違っていると、訪問者が迷う原因になります。埋め込み地図を店名で作っている場合は、地図の中にもGoogle側の情報が表示されるので、両方の内容がそろっているか定期的に確かめましょう。

よくある質問

Q. Googleマップの埋め込みにお金はかかりますか？

A. 共有メニューの「地図を埋め込む」で取得したコードを貼る方法なら、費用はかかりません。APIキーの発行も不要です。APIを使って地図をカスタマイズする場合は、Google Maps Platform の料金体系が適用されます。

Q. スマートフォンから埋め込みコードを取得できますか？

A. Googleマップのアプリからは取得できません。スマートフォンのブラウザでパソコン版の表示に切り替えれば取得できる場合もありますが、操作しにくいため、パソコンで作業するのが確実です。

Q. 複数の店舗をひとつの地図に表示できますか？

A. 共有メニューの埋め込みでは、1つの地図に1か所の場所を表示します。複数の拠点をまとめて見せたい場合は、Googleマイマップで地図を作って埋め込む方法か、Maps JavaScript API を使う方法があります。

Q. 地図のピンの色や地図のデザインを変えられますか？

A. 共有メニューの埋め込みコードでは変えられません。見た目を変えたい場合は、APIを使って地図を表示する必要があります。

Q. 埋め込んだ地図はSEOに効果がありますか？

A. 地図を埋め込むこと自体が検索順位を大きく左右するわけではありません。それよりも、住所や最寄り駅を文字で書き、Googleビジネスプロフィールの情報とそろえておくほうが、検索エンジンにも訪問者にも場所が正しく伝わります。

Q. 移転したときは何をすればいいですか？

A. 新しい場所で埋め込みコードを取り直し、ページのコードを差し替えます。住所の文字情報やGoogleビジネスプロフィールの住所も、同じタイミングで更新しましょう。

THREE D PLUS は大阪の Web 制作会社です。ホームページ制作から公開後の運用・改善までまとめてご相談いただけます。お問い合わせはこちら。