詳しい手順はこちらの動画でご覧いただけます。
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>
で上書きしてください。
応用編：高さを変えたいとき
padding-bottom:56.25%は 16:9の比率 です。- もっと縦長にしたい場合は
75%くらいに変更すると調整できます。
例：
padding-bottom:75%;
まとめ
- Googleマップがスマホで表示されない原因は「幅の固定」や「lazy load」の影響が多い
- 修正済みテンプレートを使えば、初心者でもすぐ解決できる
- 正しく表示できれば、お店紹介や観光地紹介の記事がもっと見やすくなる！
💡 私も実際にこの方法で解決できました。
同じように困っている方は、ぜひこの記事を参考にしてみてください！
