Googleマップ 埋め込み 表示されない原因と直し方

自社サイトのアクセスページに貼ったGoogleマップが真っ白のまま、あるいはグレーの地図に「このページでは Google マップが正しく読み込まれませんでした」と出る。原因はほぼ2つに絞れます。「Googleマップの共有メニューからコピーしたiframe」を貼っているのか、「Maps Embed API / Maps JavaScript API」を使っているのかで、疑うべき場所がまったく変わるからです。

結論から言うと、グレーの地図に警告文が重なっている場合は、ほぼ100%がAPIキー側の問題（キーが無い・そのAPIが有効化されていない・課金が有効になっていない・リファラー制限がドメインと合っていない）です。一方、枠すら出ない・真っ白・高さがゼロという場合は、URLかCSSかブラウザ側のブロックです。この記事では、この分かれ道から始めて、上から順に潰していく6手順を用意しました。Maps JavaScript API（ダイナミックマップ）は公式の料金表で月10,000回まで無料枠があり、そこを超えると1,000回あたり7.00ドルから課金されます。「地図を出すだけ」なら、そもそも課金の土俵に乗る必要がないケースがほとんどです。

まず分岐：あなたの地図は「3つの方式」のどれか

Googleマップをサイトに載せる方法は、実務上3つあります。トラブルの切り分けは、この見分けから始めないと必ず遠回りになります。見分け方は簡単で、HTMLのsrcに何が書いてあるかを見るだけです。

①はGoogleマップ本体の「共有」→「地図を埋め込む」→「HTMLをコピー」で得られるものです。Googleマップヘルプにも、ルートや場所の共有手順として「『地図を埋め込む』をクリックし、『HTMLをコピー』をクリック」と案内されています。このHTMLのsrcにはkey=というパラメータが含まれません。つまり①を使っている限り、APIキーも請求先アカウントも一切関係ありません。「キーの設定が悪いのでは」と何時間も調べる前に、まず自分がどれを使っているかを確定してください。

②のMaps Embed APIは、公式の利用と課金のページに「An API key is required for all Maps Embed API requests」と書かれており、キーは必ず要ります。同じページに「Maps Embed usage is available at no charge」「no daily or usage rate limitations」とあるので、費用と回数の心配は要りません。ただし「無料」と「キー不要」は別の話です。ここを混同したままkey=を空にして貼っている実装を、現場でよく見かけます。

③のMaps JavaScript APIは、地図をJavaScriptで組み立てる方式です。公式のクラウド設定ガイドでは、課金情報を入れずに試せる「Maps Demo Key」が用意されている一方、本番に移すときはAPIキーの作成と課金の有効化を行う手順が案内されています。つまり本番で③を使うなら、Google Cloudの請求先アカウントは避けて通れません。

症状別・原因の早見表

画面に何が出ているかで、疑う場所はかなり絞れます。まずはこの表で当たりを付けてから、次章の手順に入ってください。

上から順に試す切り分け6手順

ここからは、影響が小さく確認が速い順に並べています。飛ばさずに上からやってください。3手順目までで解決することがほとんどです。

手順1：srcに入れているURLが「埋め込み用」か確かめる

一番多い事故が、ブラウザのアドレスバーのURLや共有ボタンの短縮URLを、そのままiframeのsrcに貼ってしまうことです。具体的には次の2つです。

1. https://www.google.com/maps/place/…（通常の地図ページのURL）
2. https://maps.app.goo.gl/…（共有ボタンで出る短縮URL）

この2つは、iframeのsrcに入れても絶対に表示されません。実際に2026年9月にレスポンスヘッダーを確認したところ、どちらもX-Frame-Options: SAMEORIGINを返していました。MDNの解説どおり、このヘッダーが付いた文書は、同一オリジン以外のページの中に枠として読み込むことをブラウザ自身が拒否します。サーバー側が「他所のサイトの中に入れるな」と宣言しているので、こちら側のCSSをどういじっても直りません。

直し方は単純で、Googleマップの「共有」→「地図を埋め込む」タブから出てくるHTMLを丸ごとコピーして使うことです。そこで得られるsrcはhttps://www.google.com/maps/embed?pb=…という形になっており、これはフレーム内表示を前提に用意されたURLです。手作業でURLを組み立てず、Googleが出したHTMLをそのまま貼るのが最短です。

Maps Embed APIを使う場合は、モードごとにベースURLが決まっています。場所を1つ出すならhttps://www.google.com/maps/embed/v1/place?key=YOUR_KEY&q=…、経路なら/v1/directionsでoriginとdestinationが必須、検索結果なら/v1/search、緯度経度指定なら/v1/viewでcenterが必須、ストリートビューなら/v1/streetviewです。空白は+または%20のどちらでもエスケープできると公式に明記されています。「品川区北品川5-9-15」のような住所を生のまま入れて、記号やスペースがURLを壊しているケースもここで潰せます。

手順2：ブラウザのコンソールに出ているエラー名を読む

推測をやめて、ブラウザに聞きます。ページを開いた状態で開発者ツールを開き、コンソールのタブを見てください。Maps JavaScript APIを使っている場合、Googleは原因ごとに別々のエラー名を出しており、公式ドキュメントに意味が定義されています。

• MissingKeyMapError：APIを読み込むscript要素に、必要な認証パラメータが欠けている
• InvalidKeyMapError：script要素に入れたAPIキーが見つからない。正しいキーか確認する
• ApiNotActivatedMapError：そのプロジェクトでMaps JavaScript APIが有効化されていない。Google CloudコンソールのAPI一覧から有効化する
• RefererNotAllowedMapError：現在このAPIを読み込んでいるURLが、キーの許可リファラーに入っていない。キーのリファラー設定を確認する
• BillingNotEnabledMapError：プロジェクトで課金が有効になっていない。Google Cloudプロジェクトで課金を有効にする必要がある

この5つのどれが出ているかが分かれば、以降の手順は該当する1つだけ見れば済みます。エラー名を読まずに設定を片っ端からいじるのが、一番時間を溶かすパターンです。なお、地図自体は動くけれど画面に「For development purposes only」という透かしが重なる、あるいは地図が暗くなる状態については、公式ドキュメントが「APIキーか課金のどちらかに問題がある」ことを示すサインだと説明しています。

手順3：APIキーそのものを点検する（②③のみ）

手順2でMissingKey／InvalidKey／ApiNotActivated／BillingNotEnabledが出ていたら、Google Cloudコンソール側の作業です。順番はこうです。

1. 使っているキーが、いま見ているサイト用のプロジェクトのものか確認する（別プロジェクトのキーを貼っている事故が多い）
2. そのプロジェクトで、使いたいAPI（Maps Embed API／Maps JavaScript API）が有効化されているか確認する。②を使うのにJavaScript APIだけ有効化している、という取り違えが起こりやすい
3. Maps JavaScript APIを本番で使うなら、請求先アカウントを紐づけて課金を有効化する
4. キーをHTMLに書いた際に、余計な空白・改行・全角文字が混ざっていないか目視する

ここで一度立ち止まってほしいのが、「そもそも③である必要があるか」です。アクセスページに地図を1枚出したいだけなら、①の共有iframeで足ります。キーも課金も要らず、リファラー制限で本番だけ落ちる事故も起きません。複数ピン・独自スタイル・クリックで情報を出すといった要件が無いのに③を選ぶと、無料枠の管理という運用コストを永久に背負うことになります。

手順4：APIキーのリファラー制限とドメインを突き合わせる

「ローカルでは出るのに本番だけグレー」「本番は出るのにステージングだけ出ない」——この症状はほぼリファラー制限です。APIキーには「このドメインからの呼び出しだけ許す」というウェブサイト制限をかけられますが、実際のURLと1文字でも食い違うと弾かれます。

公式のセキュリティ ベストプラクティスでは、リファラーとして普遍的にサポートされるスキームはhttpsとhttpであり、それ以外のスキームは正しく動く保証がないと明記されています。またワイルドカードでサブドメインをまとめて許可でき、たとえばhttps://*.google.comと書けば.google.comで終わるサイトをすべて許可する、という例が挙げられています。よくある取りこぼしは次のとおりです。

• wwwあり・なしのどちらか片方しか登録していない
• http://で登録していて、実際はhttps://で配信している
• プレビュー用のサブドメインやステージング環境のURLを登録し忘れている
• キーを1本で使い回していて、制限を厳しくした瞬間に他のページまで巻き添えで落ちる

4つ目については、公式が明快な処方箋を出しています。「Maps Embed API用に別のAPIキーを作り、そのキーはMaps Embed APIだけに制限する」という運用です。用途ごとにキーを分けておけば、片方の制限を変えても他方が巻き添えにならず、切り分けも一瞬で済みます。

なお、そもそも本番のドメインやDNSを誰が管理しているのか分からず、確認が進まないことがあります。その場合はホームページのドメインとサーバーの管理会社がわからない時の調べ方3手順の手順で管理元を特定してから戻ってきてください。制限に登録すべき正確なホスト名が確定しないと、この手順は永久に終わりません。

手順5：混在コンテンツ・CSP・広告ブロッカーを疑う

キーが正しくても、ブラウザ側が地図の読み込みを止めていることがあります。3つあります。

混在コンテンツ。HTTPSのページの中にhttp://で始まるiframeを置くと、ブラウザがブロックします。MDNの解説では、iframeはsrcでオリジンを指定する要素として「blockable content（ブロック対象）」に分類されており、画像や音声のように自動でHTTPSへ格上げされることなく、ブロックされて終わりです。古いページからコピーしてきた埋め込みコードのsrcがhttp://のままになっていないか、必ず見てください。サイト全体がまだHTTPSになっていない場合は、地図だけの問題ではありません。保護されていない通信と表示される原因と直し方を先に片づけるほうが、結果的に早く終わります。

Content-Security-Policy。セキュリティ対策としてCSPヘッダーを入れているサイトでは、frame-srcディレクティブが効きます。MDNによれば、frame-srcは<iframe>などで読み込める入れ子の閲覧コンテキストの許可元を指定するもので、許可リストに一致しないURLのiframeはブロックされて読み込まれません。しかもこのディレクティブが書かれていない場合、ブラウザはchild-srcを探し、それも無ければdefault-srcにフォールバックします。つまりdefault-src 'self'とだけ書いてあるサイトでは、frame-srcを一度も書いていないのにGoogleマップが弾かれます。この場合はframe-srcにhttps://www.google.comを許可してください。

拡張機能・トラッキング防止。「自分のPCでだけ出ない」ときは、まずシークレットウィンドウ（拡張機能が無効な状態）で開き、次に別の回線・別の端末で開いてください。ここで出るなら、サイト側は正常です。社内ネットワークのフィルタや広告ブロッカーが第三者フレームを止めているだけなので、コードを直しても何も変わりません。「誰の環境で再現するか」を先に確定させるのが、この種の調査では最短経路です。

ここまで自力で追いかけても原因が絞れない、あるいは制作会社と連絡が取れずCSPやDNSに手が届かない、ということはよくあります。Mihataでは、ご質問に答えていただくだけで翌日にデザインイメージを無料でお作りし、最短2週間で公開まで進めています。SEO・ドメイン・サーバー込みで、Next.jsとWordPressのどちらでも制作でき、創業5年以内の会社様は初期費用0円です。地図が出ないことをきっかけにサイト全体を見直したい場合は、気軽に覗いてみてください。

手順6：CSSと遅延読み込みを見る（枠すら出ないとき）

エラーも警告も出ていないのに何も見えない場合、地図は読み込めていて高さがゼロになっているだけのことがあります。MDNによれば、iframeの既定サイズは幅300px・高さ150pxです。レスポンシブ対応でwidth:100%とheight:100%だけを指定すると、親要素に明示的な高さが無い限り高さが解決せず、線1本のような見た目になります。

• iframeにheight属性が残っているか、CSSでheight: 400pxのように実寸を与えているか
• 親要素がdisplay:noneになっていないか（タブUI・アコーディオンの中に地図を置いた場合の定番）
• aspect-ratioで高さを作っている場合、子要素のheight:100%が解決していないか

もうひとつが遅延読み込みです。loading="lazy"を付けたiframeは、MDNの説明どおり「ビューポートから一定距離に近づくまで読み込みを遅らせる」挙動になります。さらに重要なのは、遅延が働くのはJavaScriptが有効なときだけだと明記されている点です。スクリプトを止めた環境や、独自のスクロール監視で読み込みを制御している実装では、意図しないタイミングで空のままになることがあります。地図がファーストビュー付近にあるならloading="lazy"は外してしまうのが安全です。

なお、PCでは正常なのにスマホだけ地図が枠から飛び出す・潰れるという場合は、地図固有ではなくレイアウト全体の問題であることが多いです。ホームページがスマホで崩れる原因7つと直し方で挙げている横幅の固定値やoverflowの扱いを先に確認してください。

結局どれを選ぶべきか

切り分けが終わったら、次は同じ事故を繰り返さない選び方です。判断は用途で決まります。

1. アクセスページに地図を1枚出すだけ　→ ①共有iframe。キーも課金も管理不要で、事故要因が構造的に存在しない
2. 店舗ページを数十件ぶん自動生成する／住所からURLを組み立てたい　→ ②Maps Embed API。公式が費用なし・回数制限なしと明記しているので、規模が増えても課金の心配がない
3. 複数ピン・独自スタイル・クリックで情報表示など、地図をアプリとして使う　→ ③Maps JavaScript API。無料枠は月10,000回で、超過分は1,000回あたり7.00ドルから

迷ったら①です。「将来APIを使うかもしれないから最初から③で」という選び方が、いちばん多くのサイトを止めています。キーの有効期限管理・リファラー制限・課金アカウントの支払い方法の失効まで、地図と無関係な理由で地図が消える経路をわざわざ増やすことになるからです。

地図が直ったあとに見ておきたいアクセスページの周辺

アクセスページは、来店・来社の直前に見られるページです。ここが機能していないと、地図が出るかどうか以前に集客が漏れます。あわせて次の2点を点検しておくと、投じた時間の回収率が上がります。

ひとつは、Googleビジネスプロフィール側の情報とサイトの住所・営業時間が一致しているかです。検索結果からの流入は、サイトよりも先にプロフィール側を経由することが少なくありません。具体的な整え方はGoogleビジネスプロフィール×HP連携｜地方の集客を伸ばす5施策にまとめています。

もうひとつは、同じページに置いてある問い合わせフォームです。地図の不具合を調べていて、実はフォームの通知メールも数か月届いていなかった、という発見はよくあります。問い合わせフォームのメールが届かない原因と切り分け6手順の手順で、テスト送信から受信までを一度通しで確認しておいてください。

担当者が5分で回せる確認リスト

最後に、社内で共有できる形にまとめます。上から順に、YESが続く限り次へ進んでください。

1. iframeのsrcはmaps/embed?pb=またはmaps/embed/v1/で始まっているか（maps/placeやmaps.app.goo.glなら、そこが原因）
2. srcはhttps://で始まっているか
3. ブラウザのコンソールにMapErrorで終わるエラーが出ていないか
4. 出ているなら、そのエラー名に対応する設定（キー・API有効化・課金・リファラー）を1つだけ直したか
5. シークレットウィンドウと別端末でも同じ症状か
6. iframeに実寸の高さが与えられているか、親がdisplay:noneでないか
7. CSPを設定しているなら、frame-src（またはdefault-src）にhttps://www.google.comが入っているか

この7つで再現条件が特定できないケースは、経験上ほとんどありません。逆に、特定せずに設定を同時に複数変えると、直った理由が分からず再発時にまた同じ時間を使うことになります。1回に1つだけ変えて、そのつど表示を確認してください。

まとめ

Googleマップの埋め込みが表示されないとき、最初にやることは設定変更ではなく方式の特定です。共有メニューのiframeならAPIキーは無関係、Maps Embed APIならキーは必須だが費用はかからず、Maps JavaScript APIならキーと課金の両方が要る。この3分岐を頭に入れておくだけで、調査時間は劇的に短くなります。グレーの警告付き地図はキー側、真っ白や高さゼロはURL・CSS・ブラウザのブロック側。あとはコンソールのエラー名を読み、対応する設定を1つずつ直すだけです。

地図が出ない状態を放置すると、来店を決めかけたお客様がそのまま離脱します。原因の切り分けまでは自社で追えても、サーバー設定やCSPまで踏み込むと手が止まる、という場合はご相談ください。Mihataは中小企業向けにホームページ制作・AIブログ・独自AI開発・AI導入支援を行っており、既存サイトの不具合調査から作り直しまで対応しています。