iframe埋め込みとAPIキー方式は別物
Googleマップをページに載せる方法は大きく2種類あります。1つはGoogleマップの「共有」メニューから取得するiframeの埋め込みコードを貼る方法で、こちらはAPIキー不要です。もう1つはMaps JavaScript APIなどを使い、地図を自分のコードで描画する方法で、こちらはAPIキーが必須です。
単に場所を表示したいだけなら、APIキー不要のiframe埋め込みが圧倒的に簡単で、トラブルも少なくなります。まず自分がどちらの方式を使っているのかを確認してください。
- iframe埋め込み: 共有メニューのコードを貼るだけ。APIキー不要
- API方式: scriptでMaps JavaScript APIを読み込む。APIキー必須
- 場所を見せるだけなら iframe 埋め込みが簡単で確実
iframe埋め込みが表示されないとき
iframe方式で灰色のままになる場合、共有メニューの「地図を埋め込む」タブから取得した正しいコードを使っているかを確認します。検索バーのURLをそのままiframeに入れると表示されません。埋め込み用のコードは pb= を含む長いsrcになっているのが特徴です。
コードを部分的に削ったり、改行や引用符が壊れたりしても表示されなくなります。AI生成HTMLでは引用符がおかしくなっていることがあるので、公式から取り直してそのまま貼るのが確実です。
症状別チェック表
Googleマップ埋め込みが表示されないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
API方式でエラーが出るとき
API方式で地図が読み込めないときは、ブラウザの開発者ツールのコンソールに具体的なエラーが表示されます。よくあるのは、APIキーが無効、課金(請求先アカウント)が有効になっていない、キーに付けたリファラ制限が公開ドメインと一致していない、という3つです。
リファラ制限は、キーを使えるサイトのドメインを縛る機能です。テスト時のドメインと公開時のドメインが違うと、公開した途端に弾かれます。地図を載せるドメインをキーの許可リストに正しく追加してください。
なお、公開ページに直接書き込んだAPIキーは閲覧者に見えます。利用範囲を絞るリファラ制限などをかけ、必要以上の権限を付けないようにしてください。
- APIキーが有効で、対象のAPIが有効化されているか
- 請求先アカウントが設定されているか
- キーのリファラ制限が公開ドメインと一致しているか
- コンソールに出るエラーメッセージを読む
切り分けの手順
灰色のままで原因が分からないときは、次の順で確認すると早く特定できます。
- 開発者ツールのコンソールでエラー文を確認する
- API方式ならまずAPIキー不要のiframe埋め込みに置き換えてみる
- iframeのsrcが共有メニューの埋め込みコード(pb=を含む)になっているか確認する
- 公開しているドメインがキーの許可リストに入っているか見直す
- 公式から取得し直したコードに丸ごと差し替える
公開ドメインで確認するには
API方式のリファラ制限は、実際に公開されるドメイン上でしか正しくテストできません。ローカルのファイルや一時的なアドレスでは、本番と挙動が変わることがあります。
ギガサイト便にHTMLをドロップすると 〇〇.giga-site.com のhttpsの共有URLが発行され、その固定のサブドメイン上で地図が表示されるか確認できます。コードやキー設定を直したら同じURLのままファイルを差し替えられるので、ドメインを変えずに何度も再確認できます。レビュー用には、認証を付ければ関係者だけに見せられます。
よくある質問
iframeとAPIキーのどちらを使うべきですか。
場所を表示するだけなら、APIキー不要のiframe埋め込みが簡単で確実です。地図上に独自のマーカーや経路を動的に描くなど高度な制御が必要な場合だけ、APIキーを使うJavaScript方式を検討してください。
「正しく読み込まれませんでした」と出ます。
API方式で多いエラーです。キーが無効、請求先アカウント未設定、リファラ制限が公開ドメインと不一致のいずれかが典型です。開発者ツールのコンソールの詳細メッセージを読んで原因を特定してください。
ローカルでは出たのに公開すると灰色になります。
APIキーのリファラ制限が公開ドメインを許可していない可能性が高いです。地図を載せるドメインをキーの許可リストに追加してください。公開ドメイン上で確認すると挙動を再現しやすくなります。
APIキーをHTMLに書いても大丈夫ですか。
公開ページに書いたキーは閲覧者から見えます。リファラ制限などで使える範囲を絞り、不要な権限を付けないようにしてください。地図表示だけなら、キー不要のiframe埋め込みのほうが安全です。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。