googleマップが表示されない時、コードを書き換えて解決!

更新 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://の部分を、&#104;tt&#112;s&#58;&#47;&#47;

に書き換えたら、Safariでも表示されたのでした!

もちろんスマホ、iPad, chrome, Firefoxでも表示できました。

つまり

<iframe src="&#104;tt&#112;s&#58;&#47;&#47;//www.google.com/maps/embed?pb=ここは各マップのurlが挿入される場所&key=ここにAPIを挿入する" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

これで解決しました。

それ以外の方法として、ワードプレスの固定ページのこの部分の操作とかも
試してみましたができませんでした。

しかし上のやり方で成功しました。

困ってる方はやってみてください。

ピックアップ記事

  1. Affinity Photoでも簡単に電子印鑑ができます!
    目次2023年10月インボイス制度導入前、Affinity Photoでの電子印鑑…
  2. ホームページの制作(Web制作)は、専門職がチームを組んで行います。見ず知らずの人たちが一緒に仕事を…
  3. (3)-3 GAFAMAからの脱出 2022年ブラウザはこれに決めました!おすすめ理由
    目次GAFAMAからの脱出する上で何はともあれブラウザの存在は大きいブラウザのセキュリティ度計…
  4. UIとUXを混同してる人が多すぎる
    目次 UIとUXを混同してる人が多すぎる チームプロジェクトにおけるUXとUIの「急がばま…
  5. LinkedinバッチをWordpressで表示させるには?
    目次これがLinkedinバッチの実物で、一番大きい特大サイズですLinkedinバッチをWo…
Web制作の流れ
もっとくわしい何を頼めるの?料金は?
PAGE TOP