---
title: "Googleマップ埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト"
description: "AIにGoogleマップ埋め込みのHTMLを生成させる際、地図が表示されないコードが出てくる問題に直面している方向け。どのようなプロンプトを書けばAPIキー不要の正しい埋め込みコードが得られるかを具体例つきで解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/google-map-embed-hidden-ai-prompt"
markdown: "https://giga-site.com/articles/google-map-embed-hidden-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Googleマップ埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト
ChatGPTやClaudeにHTMLを生成させてGoogleマップを埋め込もうとしても、出力されたコードで地図が表示されないことがよくあります。AIが生成するiframeのURLはサンプル値で埋め込み形式でないことが多く、プロンプトの書き方を一工夫するだけで問題を未然に防げます。
> Source HTML: https://giga-site.com/articles/google-map-embed-hidden-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
AIは「Googleマップを埋め込んで」という指示に対し、maps.google.com/maps?q=...というブラウザURLをiframe srcに入れたコードを出力することがあります。このURLは非公式形式であり、CORSエラーや空白表示になる場合があります。AIの学習データが古い仕様に基づいているため、明示的に形式を指定しないと誤ったコードが生成されます。
もう一つは `YOUR_API_KEY` というプレースホルダーを含むJavaScript版マップコードをAIが出力するケースです。このコードを動かすにはGoogle Cloud ConsoleでAPIキーを発行しHTTPリファラー設定を行う必要があり、初心者には手順が多すぎます。APIキー不要の埋め込みiframe方式を使うよう明示的に指示するだけでこの問題を回避できます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## 自分側で確認すること
AIが出力したiframeコードのsrc属性を確認します。正しい埋め込み形式は`https://www.google.com/maps/embed?pb=...`のように`/maps/embed`を含むURLです。この形式のURLはGoogleマップで「共有」→「地図を埋め込む」をクリックすると取得できます。AIに「以下のiframeコードを使ってHTMLを作って」と実際の埋め込みコードを貼り付けると確実です。
生成されたHTMLをそのままローカルのファイルで開いて確認するだけでなく、GitHubPagesやギガサイト便などHTTPSで公開できる環境にアップして確認します。ローカルのfile://スキームではCORSの挙動が異なり、正常に見えても公開後に崩れることがあります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 相手側で確認すること
AIが生成したHTMLを受け取った相手が「地図が見えない」と連絡してきたとき、まずiframeのsrc URLを教えてもらい、そのURLを新しいタブで開くよう依頼します。タブに地図が表示されるならHTML側の問題（CSSでiframeが隠れているなど）、表示されないならURL自体が不正または制限されています。
相手がモバイルブラウザで開いている場合、iframeのサイズが小さすぎてスクロールで見えていないケースも散見されます。AIに生成を依頼するとき「スマートフォンでも全幅で表示されるようにwidth:100%を設定して」と明記すると、モバイルでの表示崩れを防げます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 再発防止の運用
AIへのプロンプトに「Googleマップ公式の共有機能から取得したiframeコードを使って埋め込んでください。APIキーは不要の方法で。埋め込みURLは https://www.google.com/maps/embed?pb=xxxxxxx の形式にしてください」と明記するテンプレートを用意しておくと、毎回指示を考える手間がなくなります。
AIが生成したHTMLを共有する前に必ずiframeのsrc URLを手動で確認するレビュー工程を設けます。src内に`YOUR_API_KEY`や`PLACE_ID`などのプレースホルダーが残っていたらAIが未完成のコードを出力したサインです。修正してから共有することで相手に迷惑をかけるリスクをゼロにできます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## よくある質問
### AIにGoogleマップ埋め込みコードを生成させるとき、最低限指定すべき内容は何ですか？
「APIキー不要のiframe埋め込み方式を使うこと」「iframeのsrc URLはhttps://www.google.com/maps/embed?pb=...の形式にすること」「スマートフォン対応でwidth:100%にすること」の3点を明記すると、使えないコードが出力されるリスクを大幅に減らせます。
### AIが出力したコードのAPIキーのプレースホルダーをそのまま公開してしまいました。問題はありますか？
プレースホルダー文字列（YOUR_API_KEY等）をそのまま公開しても地図は動作しませんが、セキュリティ上の問題はありません。ただし地図は表示されないため、正規のiframe埋め込みコードに差し替えてください。
### AIが毎回異なる形式のiframeを出力します。どうすれば安定しますか？
プロンプトに「以下のiframeをそのままHTML内に貼り付けてください」として実際のGoogleマップ共有コードを貼り付ける方法が最も確実です。AIに形式を判断させず、正しいコードを直接渡すことで出力が安定します。
## 関連記事
- [Googleマップ埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/google-map-embed-hidden-fix/index.md)
- [Googleマップ埋め込みが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/google-map-embed-hidden-checklist/index.md)
- [Googleマップ埋め込みが表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/google-map-embed-hidden-request-message/index.md)
- [PDF埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/pdf-embed-hidden-ai-prompt/index.md)
- [YouTube埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/youtube-embed-hidden-ai-prompt/index.md)
- [PDF埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/pdf-embed-hidden-fix/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Googleマップ埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト",
"description": "AIにGoogleマップ埋め込みのHTMLを生成させる際、地図が表示されないコードが出てくる問題に直面している方向け。どのようなプロンプトを書けばAPIキー不要の正しい埋め込みコードが得られるかを具体例つきで解説します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/google-map-embed-hidden-ai-prompt",
"url": "https://giga-site.com/articles/google-map-embed-hidden-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "AIにGoogleマップ埋め込みコードを生成させるとき、最低限指定すべき内容は何ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "「APIキー不要のiframe埋め込み方式を使うこと」「iframeのsrc URLはhttps://www.google.com/maps/embed?pb=...の形式にすること」「スマートフォン対応でwidth:100%にすること」の3点を明記すると、使えないコードが出力されるリスクを大幅に減らせます。"
}
},
{
"@type": "Question",
"name": "AIが出力したコードのAPIキーのプレースホルダーをそのまま公開してしまいました。問題はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "プレースホルダー文字列（YOUR_API_KEY等）をそのまま公開しても地図は動作しませんが、セキュリティ上の問題はありません。ただし地図は表示されないため、正規のiframe埋め込みコードに差し替えてください。"
}
},
{
"@type": "Question",
"name": "AIが毎回異なる形式のiframeを出力します。どうすれば安定しますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "プロンプトに「以下のiframeをそのままHTML内に貼り付けてください」として実際のGoogleマップ共有コードを貼り付ける方法が最も確実です。AIに形式を判断させず、正しいコードを直接渡すことで出力が安定します。"
}
}
]
}
```