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. 混在コンテンツmixed contentsを改良する方法
    混在コンテンツとは、どういう意味ですか?混在コンテンツ(Mixed contents)とは、一つ…
  2. 目次 前準備のバックアップと注意点 英語の説明を翻訳してよく読み理解する ステップごと…
  3. 目次 Webデザイナーが初めて知る「MariaDB」という名前 MariaDBって何ですか…
  4. 目次 Web Design 3.0への流れ Web Design 2.0とWeb Desi…
  5. 目次 Macスリープ再起動エラーがおこった環境 スリープ再起動エラーメッセージの内容 …
PAGE TOP