---
title: "Googleマップ埋め込みが表示されないときに共有前に確認するチェックリスト"
description: "GoogleマップのiframeをHTMLに入れて共有する前に、どの順番で何を確認すればよいか迷っている方向け。APIキー・参照元制限・表示サイズ・ネットワーク問題を段階的に絞り込めるチェックリストを提供します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/google-map-embed-hidden-checklist"
markdown: "https://giga-site.com/articles/google-map-embed-hidden-checklist/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Googleマップ埋め込みが表示されないときに共有前に確認するチェックリスト

「共有ボタンを押したのに相手からマップが見えないと言われた」という状況に備えて、HTMLに地図を埋め込む前後に踏むべき確認ステップをチェックリスト形式でまとめました。項目を順番に消し込むことで原因特定の時間を半分以下にできます。

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

## よくある原因

Googleマップ埋め込みで最も頻繁に起きるのは「埋め込み用のシェアURLではなく、ブラウザのアドレスバーのURLをそのままiframe srcに貼り付けた」パターンです。この方法は非公式であり、Googleの仕様変更で突然エラー画面になります。埋め込みコードは必ずGoogleマップ上の「共有」→「地図を埋め込む」から取得します。

もう一つは埋め込みコードを含むHTMLをローカルで確認し問題ないと判断したまま公開したケースで、公開後に参照元制限が原因で表示されなくなるものです。ローカルの確認はAPIキーの制限チェックにならないため、必ず公開先と同等の環境（HTTPSドメイン上）で確認する必要があります。

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

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

iframeのsrc URLをブラウザの新しいタブに貼り付けてアクセスします。「Googleマップを読み込めませんでした」というエラーが出た場合、APIキーの問題です。Google Cloud Console→認証情報→対象キーの詳細で「HTTPリファラー（ウェブサイト）」に公開ドメイン（例：https://example.com/*）が登録されているか確認します。

iframeのwidth・heightがCSS上で0になっていないか確認します。親要素にoverflow:hiddenやdisplay:noneが当たっていると地図が非表示になります。ChromeのDevToolsでiframe要素を右クリック→「Inspect」し、Computedタブで実際の縦横サイズを確認してください。

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

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

相手にシークレットウィンドウ（またはプライベートブラウジング）で同じURLを開いてもらいます。シークレットでは拡張機能が無効になるため、ブラウザ拡張が原因かどうかを簡単に切り分けられます。シークレットで表示されれば広告ブロッカー等を疑います。

社内の業務PCで見られない場合は、会社のネットワーク（プロキシ・ファイアウォール）がmaps.googleapis.comへの通信を制限している可能性があります。同じデバイスをWi-Fiからモバイルデータに切り替えて確認するか、IT部門に通信許可リストへの追加を依頼するよう案内します。

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

## 再発防止の運用

Googleマップを埋め込むHTMLを作成するたびに、公開前チェックリストを実行する習慣をつけます。具体的には「①埋め込みコードを公式ダイアログから取得、②APIキーに公開ドメインを許可登録、③HTTPSの本番環境またはプレビューURLでシークレットウィンドウ確認」の3ステップです。

同じHTMLを複数の相手に共有する場合、まず1人に送って「地図は見えますか」とひと言確認してから全員に展開する手順を入れると、問題が見つかったときの影響範囲を最小化できます。ギガサイト便のプレビューURL機能を活用すれば、本番公開前に自分で閲覧者視点の確認が完結します。

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

## よくある質問

### Googleマップの埋め込みコードはどこから取得するのが正しいですか？

Googleマップの画面で地点を表示した状態で「共有」ボタンをクリックし、「地図を埋め込む」タブからiframeコードをコピーします。ブラウザのアドレスバーのURLをそのままiframe srcに使うのは仕様外で動作保証がありません。

### APIキーなしで地図を埋め込む方法はありますか？

Googleマップの共有機能から取得したiframeコードはAPIキー不要で動作します。ただしGoogle Maps JavaScript APIを使ったカスタム地図はキーが必須です。トラブルを避けるには公式の共有ダイアログから取得したコードを使うのが最も安全です。

### 埋め込み地図が表示されているとき、閲覧者の位置情報は取得されますか？

iframeで埋め込んだGoogleマップは、閲覧者がブラウザの位置情報許可を与えない限り位置を取得しません。ただしGoogleのサーバーへのアクセスログ（IPアドレス等）は記録されます。プライバシーポリシーへの記載を検討してください。

## 関連記事

- [Googleマップ埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/google-map-embed-hidden-fix/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-checklist/index.md)
- [YouTube埋め込みが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/youtube-embed-hidden-checklist/index.md)
- [PDF埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/pdf-embed-hidden-fix/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Googleマップ埋め込みが表示されないときに共有前に確認するチェックリスト",
  "description": "GoogleマップのiframeをHTMLに入れて共有する前に、どの順番で何を確認すればよいか迷っている方向け。APIキー・参照元制限・表示サイズ・ネットワーク問題を段階的に絞り込めるチェックリストを提供します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/google-map-embed-hidden-checklist",
  "url": "https://giga-site.com/articles/google-map-embed-hidden-checklist",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Googleマップの埋め込みコードはどこから取得するのが正しいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Googleマップの画面で地点を表示した状態で「共有」ボタンをクリックし、「地図を埋め込む」タブからiframeコードをコピーします。ブラウザのアドレスバーのURLをそのままiframe srcに使うのは仕様外で動作保証がありません。"
      }
    },
    {
      "@type": "Question",
      "name": "APIキーなしで地図を埋め込む方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Googleマップの共有機能から取得したiframeコードはAPIキー不要で動作します。ただしGoogle Maps JavaScript APIを使ったカスタム地図はキーが必須です。トラブルを避けるには公式の共有ダイアログから取得したコードを使うのが最も安全です。"
      }
    },
    {
      "@type": "Question",
      "name": "埋め込み地図が表示されているとき、閲覧者の位置情報は取得されますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "iframeで埋め込んだGoogleマップは、閲覧者がブラウザの位置情報許可を与えない限り位置を取得しません。ただしGoogleのサーバーへのアクセスログ（IPアドレス等）は記録されます。プライバシーポリシーへの記載を検討してください。"
      }
    }
  ]
}
```