トラブルシュート

Googleマップ埋め込みが表示されないときに相手へ伝える確認依頼の書き方

HTMLに埋め込んだGoogleマップが相手に表示されないとき、原因の切り分けには相手に正確な情報を提供してもらう必要があります。「見えません」だけのやり取りでは解決が遅くなるので、確認依頼のメッセージに何を盛り込むべきかをテンプレートつきで解説します。

よくある原因

「地図が見えない」という報告には、「真っ白なボックスが表示されている」「そもそもボックス自体がない」「エラーメッセージが出ている」など複数の状態が含まれます。どの状態かによって原因が変わるため、最初の確認依頼で状況を正確に把握することが解決の最短ルートです。

相手のブラウザ環境(Chrome/Safari/Edge/Firefox)やネットワーク(社内LAN/自宅Wi-Fi/モバイルデータ)によって再現条件が変わります。同じHTMLでも環境によって表示・非表示が分かれることがあるため、確認依頼には使用ブラウザとネットワーク環境を記載してもらう項目を入れます。

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

自分側で確認すること

相手への確認依頼を送る前に、自分でシークレットウィンドウを使って同じURLを開き、地図が表示されるかを確認します。自分側で再現する場合は相手の環境を疑う前にHTMLのコードを見直す必要があります。HTMLのiframe srcを新しいタブで開き、地図が出るか確認するのが最初のステップです。

iframeを貼ったHTMLの公開URLが正しくHTTPSで配信されているか確認します。HTTPで配信されているページにGoogleマップのiframeを埋め込むとMixed Contentの警告が出てブロックされる場合があります。ギガサイト便などHTTPS対応の共有サービスを使えばこの問題は自動的に回避できます。

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

相手側で確認すること

相手に送る確認依頼メッセージには「①地図の場所に何が表示されていますか(空白/グレーのボックス/エラーテキスト)、②お使いのブラウザは何ですか、③シークレットウィンドウで開いても同じですか」の3点を必ず含めます。この3問に答えてもらうだけで原因の8割が絞れます。

相手がスマートフォンしか持っていない場合は「SafariまたはChromeのアドレスバーに同じURLを貼り付けて開いてみてください」と伝えます。アプリ内ブラウザ(LINEやInstagramの内部ブラウザ)でHTMLを開いている場合、iframe表示が制限されることがあるため、標準ブラウザで開き直すだけで解決するケースもあります。

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

再発防止の運用

確認依頼のメッセージテンプレートを一度作っておくと、次回以降の対応が格段に速くなります。「お送りしたURLでGoogleマップが表示されない場合は、①表示されている内容のスクリーンショット、②お使いのブラウザ名、③シークレットウィンドウでも同様か、の3点を教えていただけますか」という形式が使いやすいです。

HTML共有の運用として、送付前にあらかじめテスト閲覧者(社内の別端末や別ブラウザ)に確認してもらう工程を入れると、相手全員に展開してから問題が発覚するという事態を防げます。問題が見つかった場合もギガサイト便のURL差し替え機能を使えば同じリンクで修正版を配信できます。

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

よくある質問

相手からスクリーンショットをもらいましたが、地図部分が真っ白でした。何が原因ですか?

iframeのsrc URLが無効(プレースホルダーのまま・APIキー制限・非対応URL形式)か、iframeのサイズがCSSで潰れているかのどちらかが多いです。次にiframのsrc URLを直接ブラウザで開いてもらい、地図が出るか確認してください。

確認依頼を送ったところ「シークレットでは見えた」と返事がきました。次の対応は?

通常ウィンドウでは見えずシークレットで見える場合、ブラウザ拡張(広告ブロッカー等)が原因です。Chromeの設定→拡張機能から疑わしいものを一時的に無効にしてもらい、再読み込みで表示されれば確定です。

相手が「スマホのLINEから開いた」と言っています。見えない原因は何ですか?

LINEの内部ブラウザはiframeのsandbox属性やCORSの扱いが通常ブラウザと異なり、Googleマップが表示されないことがあります。URLをコピーしてSafari(iOS)またはChrome(Android)で直接開くよう案内してください。

関連記事

トラブルシュート

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

GoogleマップのiframeをHTMLに埋め込んだが相手に表示されない、という状況で原因を特定したい方向け。APIキー制限・参照元制御・Cookie設定など見落としがちなポイントを体系的に整理し、修正方針を判断できる内容です。

5分で読める
トラブルシュート

PDF埋め込みが表示されないときの原因と直し方

AI生成HTMLのPDF埋め込みが共有先で表示されない問題に直面したWeb担当者・デザイナー向け。ブラウザのPDFビューア設定差・パス問題・CSPエラーを原因別に切り分け、確実に表示させるための修正方法を解説します。

6分で読める
「トラブルシュート」の記事をもっと見る →