埋め込んだgoogleマップが表示されないブラウザや端末がある問題を解決！
drpwksadmin
googleマップが表示されないブラウザがあり、
調査に戸惑ったのでメモしておきます。
外部のWebサービスやWebツールを使っていると
仕様の変更でエラーが出たり、
表示されなくなったりということがよくありますよね。
googleマップもその一つ。
仕様変更に振り回されたくないので
カスタマイズが必要にならない限りはAPIを使わずに
「埋め込み」で表示させています。
今回も埋め込みでgoogleマップを表示させたので、
表示されないというエラーが起こるとは思いもしませんでした。
googleマップが表示されなかったブラウザや端末
- Firefox（Windows、Mac）
- iPhone12Pro Safari
Chrome 、Edge、MacのSafariでは問題なく表示されていました。
googleマップが表示されない具体的な挙動
- Firefoxは地図の位置に移動して
リロード（再読み込み）をすると表示される - iPhone12ProのSafariはどの位置を表示していても
リロード（再読み込み）をすると表示される
googleマップを表示させた方法
埋め込むコードの『https:』の部分を『https://』に書き換えるのみ。
変更前
<iframe src="https://www.google.com/maps/embed〜></iframe>
上記のコードを以下のように書き換えます。
変更後
<iframe src="https:////www.google.com/maps/embed〜></iframe>TOKYO Web Designer
googleマップが表示されなくなった原因は？
この現象は全てのサイトで起こったわけではありません。
現象が起こったサイトはWordPressを使い、様々なプラグインを使っています。
また、複数のマップを埋め込んでいるページもありました。
様々なイベントが発生しエラーが出たように感じます。
詳しく追求できていないので少しモヤっとしてはおりますが、
まずはしっかり表示されることが最優先。
同じような現象でお困りの方はぜひ試してみてください。
