よくある原因
「地図が見えない」という報告には、「真っ白なボックスが表示されている」「そもそもボックス自体がない」「エラーメッセージが出ている」など複数の状態が含まれます。どの状態かによって原因が変わるため、最初の確認依頼で状況を正確に把握することが解決の最短ルートです。
相手のブラウザ環境(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)で直接開くよう案内してください。