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. GAFAMAからの脱出
    このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。…
  2. GAFAMAからの脱出
    目次GAFAMAからインターネット空間の主導権をとり戻したいGAFAMAからの脱出条件「ギリ…
  3. 【用語を解説します】LPとはランディングページ(販売促進用の全幅なウェブページ)の事です。ブラン…
  4. GAFAMAからの脱出
    目次そもそもGAFAMって何ですか?GAFAMAから脱出するきっかけは何があったんですか?なぜ…
  5. 混在コンテンツmixed contentsを改良する方法
    混在コンテンツとは、どういう意味ですか?混在コンテンツ(Mixed contents)とは、一つ…
Web制作の流れ
PAGE TOP