---
title: "Googleマップ埋め込みが表示されないときの原因と直し方"
description: "GoogleマップのiframeをHTMLに埋め込んだが相手に表示されない、という状況で原因を特定したい方向け。APIキー制限・参照元制御・Cookie設定など見落としがちなポイントを体系的に整理し、修正方針を判断できる内容です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/google-map-embed-hidden-fix"
markdown: "https://giga-site.com/articles/google-map-embed-hidden-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Googleマップ埋め込みが表示されないときの原因と直し方

HTMLにGoogleマップのiframeを貼ったのに、共有先で地図が真っ白になるケースが頻発しています。原因はAPIキーの制限設定から閲覧者のブラウザ設定まで幅広く、一か所直せば済む問題ではありません。この記事では送信者・受信者それぞれの視点で原因を絞り込む手順を説明します。

> Source HTML: https://giga-site.com/articles/google-map-embed-hidden-fix
> Article index: https://giga-site.com/articles/index.md

## よくある原因

最も多いのはGoogle Maps Embed APIのキーに「HTTPリファラー制限」が設定されており、ローカルファイル（file://）や別ドメインからのアクセスが弾かれているケースです。Google Cloud ConsoleでAPIキーの「アプリケーションの制限」を確認し、公開先のドメインが許可リストに入っているか照合してください。

次に多いのは動画や地図のiframeに`loading="lazy"`が指定されているものの、ページ全体が短くてビューポート内に入らずロードが発火しないパターンです。高さが0pxになっているCSSも同様の症状を起こします。開発者ツールの「Elements」タブでiframeの実際のサイズを確認すると即座に判明します。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

HTMLソースを開いてiframeのsrc属性を丸ごとコピーし、ブラウザの別タブに貼り付けてみてください。「このページはエラーが発生しました」という表示が出る場合、APIキーが無効か制限超過しています。Google Cloud ConsoleのAPIとサービス→認証情報でキーの状態とクォータを確認します。

埋め込みコードをGoogle マップの「共有」ボタンから取得したか見直しましょう。独自に組んだURL（maps.google.comのクエリパラメータをiframeのsrcに直書き）は仕様外のため突然動かなくなることがあります。公式の埋め込みコード形式（maps.googleapis.com/maps/api/js や embed/v1/place）を使うのが原則です。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

閲覧者がブラウザの「サードパーティCookieをブロック」を有効にしていると、GoogleのiframeがOriginをまたいだCookieを読めずに認証エラーになる場合があります。Chrome設定のサイト設定→Cookieで一時的に許可してもらい、再読み込みで表示されるか試してもらうと切り分けができます。

法人ネットワークでは社内プロキシやDNSフィルタリングによってmaps.googleapis.comへの通信が遮断されていることがあります。スマートフォンのモバイル回線に切り替えて同じURLを開いてもらうことで、ネットワーク起因かどうかを5秒で判断できます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

APIキーは本番公開用と開発用を分けて発行し、本番キーには公開ドメインのHTTPリファラー制限を必ずかけておきます。共有先URLが変わるたびに許可リストを更新する運用をドキュメント化し、担当者が変わっても設定ミスが起きにくくします。

HTMLを共有する前に、シークレットウィンドウで公開後のURLを開き地図が正常に表示されるかを確認する手順をチェックリスト化しておきましょう。ギガサイト便のようなプレビューURL機能を使えば、本番公開前に同等の環境で動作確認ができるため、受け取った相手から「地図が見えない」と指摘されるリスクを大幅に減らせます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### ローカルのHTMLファイルではマップが表示されるのに、アップロード後に消えるのはなぜですか？

APIキーにHTTPリファラー制限をかけている場合、ローカルのfile://は許可されていてもアップロード先ドメインが許可リストに入っていないために弾かれます。Google Cloud Consoleでアップロード先ドメインを許可リストに追加してください。

### iframeのsrcに直接Google マップのURLを入れてはいけませんか？

Googleの埋め込み仕様外のURLをiframe srcに使うと予告なく動作しなくなる可能性があります。必ずGoogleマップの共有ダイアログから生成された埋め込みコード（embed/v1またはmaps.googleapis.com形式）を使用してください。

### 地図はスマホでは見えるのにPCでは表示されません。どこを確認すればよいですか？

PC側のブラウザ拡張（広告ブロッカーやプライバシーバジャーなど）がGoogleのトラッキングドメインをブロックしている可能性があります。拡張機能を一時無効化して再読み込みし、表示されれば拡張が原因です。

## 関連記事

- [Googleマップ埋め込みが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/google-map-embed-hidden-checklist/index.md)
- [Googleマップ埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/google-map-embed-hidden-ai-prompt/index.md)
- [Googleマップ埋め込みが表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/google-map-embed-hidden-request-message/index.md)
- [PDF埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/pdf-embed-hidden-fix/index.md)
- [YouTube埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/youtube-embed-hidden-fix/index.md)
- [PDF埋め込みが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/pdf-embed-hidden-checklist/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Googleマップ埋め込みが表示されないときの原因と直し方",
  "description": "GoogleマップのiframeをHTMLに埋め込んだが相手に表示されない、という状況で原因を特定したい方向け。APIキー制限・参照元制御・Cookie設定など見落としがちなポイントを体系的に整理し、修正方針を判断できる内容です。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/google-map-embed-hidden-fix",
  "url": "https://giga-site.com/articles/google-map-embed-hidden-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ローカルのHTMLファイルではマップが表示されるのに、アップロード後に消えるのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "APIキーにHTTPリファラー制限をかけている場合、ローカルのfile://は許可されていてもアップロード先ドメインが許可リストに入っていないために弾かれます。Google Cloud Consoleでアップロード先ドメインを許可リストに追加してください。"
      }
    },
    {
      "@type": "Question",
      "name": "iframeのsrcに直接Google マップのURLを入れてはいけませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Googleの埋め込み仕様外のURLをiframe srcに使うと予告なく動作しなくなる可能性があります。必ずGoogleマップの共有ダイアログから生成された埋め込みコード（embed/v1またはmaps.googleapis.com形式）を使用してください。"
      }
    },
    {
      "@type": "Question",
      "name": "地図はスマホでは見えるのにPCでは表示されません。どこを確認すればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "PC側のブラウザ拡張（広告ブロッカーやプライバシーバジャーなど）がGoogleのトラッキングドメインをブロックしている可能性があります。拡張機能を一時無効化して再読み込みし、表示されれば拡張が原因です。"
      }
    }
  ]
}
```