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. (3)-3 GAFAMAからの脱出 2022年ブラウザはこれに決めました!おすすめ理由
    目次GAFAMAからの脱出する上で何はともあれブラウザの存在は大きいブラウザのセキュリティ度計…
  2. LinkedinバッチをWordpressで表示させるには?
    目次これがLinkedinバッチの実物で、一番大きい特大サイズですLinkedinバッチをWo…
  3. ITの職種知りたいです。女性に向くのは?
    目次 よく聞かれる「女性向のIT技術職って何ですか?」 このWeb関連職は「IT技術職」に…
  4. 目次 Sexyな商品を使いたいという日本人の気持ちはある 論理的・科学的な情報処理スキルの…
  5. GAFAMAからの脱出
    目次そもそもGAFAMって何ですか?GAFAMAから脱出するきっかけは何があったんですか?な…
Web制作の流れ
もっとくわしい何を頼めるの?料金は?
PAGE TOP