「PCでは見えるのにスマホで真っ白？Googleマップ埋め込みの直し方」

2025年9月3日

詳しい手順はこちらの動画でご覧いただけます。

Googleマップがスマホで表示されない！原因と解決方法【初心者向け】

「PCではGoogleマップが表示されるのに、スマホでは真っ白で何も出てこない…」
そんなトラブルに悩んでいませんか？

パソコン画面では埋め込みが出来ているが、スマホの画面では真っ白で何も表示されない空白

私もブログに地図を埋め込んだときに同じ状況になり、かなり困りました。
でも、調べて実際に試したところ とても簡単なコードの修正 で解決できたんです！

この記事では、初心者の方でもわかるように「原因」と「解決方法」をまとめました。
コピペで使える修正済みコードもご紹介しますので、ぜひ参考にしてください。

なぜスマホで表示されないのか？

PCでは見えるのにスマホで真っ白になるのは、主に以下の理由です。

幅（width）が固定値になっている
→ 例：width="600" のままだとスマホ画面に合わず、表示エラーになることがある。
lazy load の影響
→ loading="lazy" が原因で、モバイル環境だと読み込みがスキップされてしまう場合がある。
テーマやプラグインがiframeをブロック
→ AMPやLazy Load、Cookie同意プラグインの設定でマップがブロックされるケースもある。
解決方法（初心者でもできる！）
✅ 一番簡単な修正方法
埋め込みコードの 幅を100%に変更 して、lazyをオフ にすれば表示できる場合がほとんどです。

グーグルマップの地図を埋め込む方法

HTML書き換え方法

この行を追加：<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">

この行を上書き：style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"loading="eager"allowfullscreen></iframe></div>

これでPCでもスマホでも、きれいにレスポンシブ対応で表示されます！

コピーしたHTMLが下記のような場合がありますがこの場合も2sjp"の後ろを
style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"loading="eager"allowfullscreen></iframe></div>
で上書きしてください。