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では表示されないのです。

だから確認はしていませんが、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://”.

………………………………….

このようなメッセージがグーグルマップのところに表示されました。

そこでいろいろ調べて結局解決したのは下記の方法でした。

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. ・ UXデザインって何ですか? ・ なぜUXデザイナーが注目されているのですか? …
  2. ・ 大事な履歴書用写真なのに、その辺にある適当な写真を使ってませんか? ・ 履歴書用写…
  3. ・ 一般人がインスタ映えしたいなら、欠かせない適度盛りのプロフィール画像はこれ! ・ …
PAGE TOP