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

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. ・ Macスリープ再起動エラーがおこった環境 ・ スリープ再起動エラーメッセージの内容…
  2. 2020年もすばらしい年になるはずでした。もう半年以上が過ぎました。2020年のお正月はいつも通り、…
  3. ・ 決済文書に押印するために出社しなければならない国・ 電子印鑑は、Photoshopでこんな…
  4. ・ 最終デットラインはあと数日今年2月末までくらいです ・ SSL対応していないと何が…
  5. ほとんどの人が経験するよく失敗する事の一つが、Wordpressのバージョンアップです。以…
PAGE TOP