更新 2021/06/24
googleマップが表示されない時、コードを書き換えて解決！
googleマップが表示されないエラーが起こった場合の解決策です。
困っている方が多そうなので、自分の備忘録兼ねてアップしておきます。
2016年の春ころから起こってきたgoogleマップの表示エラーです。
2016年の4月頃から古いAPIではエラーになるとか、
そもそもAPIを記入していないとエラーになるとかで、
私もエラーになってしまったワードプレスのGoogleマップを
<iframe src="https://www.google.com/maps/embed?pb=ここは各マップのurlが挿入される場所&key=ここにAPIを挿入する" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
上記のようにAPIを取得してから挿入して表示しました。
と、おもったものの…
・ChromeやFirefoxでは表示された
・Androidスマホでも表示された
しかし、
・iPadでは表示されない。
・MacのSafariでも表示されない。
iPadのブラウザはSafariですから、APIを入れてもSafariでは表示されない。
つまり、iPadはSafariですからAPIを入れてもSafariでは表示されないのです。
だから確認はしていませんが、iPhoneでも表示されないはずです。
safariでは
The Google Maps API server rejected your request. Requests to this API must be over SSL. Load the API with “https://” instead of “http://”.
上のようなメッセージがグーグルマップのところに表示されてしまいました。
このやり方で、スマホ、iPadやMacのSafari、Chrome、Firefoxでも表示できました。
そこでさらに調査して、検証した結果、結局解決したのは下記の方法でした。
https://の部分を、https://
に書き換えたら、Safariでも表示されたのでした！
もちろんスマホ、iPad, chrome, Firefoxでも表示できました。
つまり
<iframe src="https:////www.google.com/maps/embed?pb=ここは各マップのurlが挿入される場所&key=ここにAPIを挿入する" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
これで解決しました。
それ以外の方法として、ワードプレスの固定ページのこの部分の操作とかも
試してみましたができませんでした。
しかし上のやり方で成功しました。
困ってる方はやってみてください。
PAGE TOP