テックブログ

WordPressでいろいろいじっていたらGoogle Mapsが表示されなくなった!!

更新日:

スクリーンショット 2016-06-19 13.07.25

The Google Maps API server rejected your request. Requests to this API must be over SSL.

??

WordPressでGoogle Mapsを使った記事を作成していたのですが、あるとき、このようなメッセージが出てGoogle Mapsが表示されなくなった経験はありませんか?

ちょうどいまお手伝いしているところでそれが発生したので、原因を探ってみました。

犯人は「ヤス」ではなく「Wordpress HTTPS」というプラグイン

まあ、だいたいこういう時はエラーメッセージでググればだいたい同じことでハマった人たちの記事が出てくるのでとりあえずググります。

結論から言えばこういうことらしいです。

WordPress HTTPS使用時にSSL設定をしていないページでもGoogleマップを表示させる方法 | イーエスユー

これは、Wordpress HTTPSによってソース内のhttps://がhttp://に書き換えられることと、Googleマップがhttps://からのリクエストしか受け付けないことに起因するようです。

というわけで、回避策として下記の様にしてみました。
(上記リンク先と少しだけ記述が異なります)

次のようなGoogle Mapsタグを貼っていたとします。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468367!2d139.74324421556292!3d35.658580480199646!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1466309395185" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

このsrcのところの「https://www.google.com/maps/embed?pb=!1m18・・・」を別途控えておいて削除し、次のように書きかえます。

<div id="accessMap"><iframe style="border: 0;" src="" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $(window).load(function() {
 $('#accessMap > iframe').attr('src','https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468367!2d139.74324421556292!3d35.658580480199646!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1466309395185');
 });
});
</script>

仕組みとしてはGoogle Mapsのiframeのsrcで指定されている部分を削除し、jQueryでそのsrc属性にあったものをそこに書き込むという処理をしています。(従来のままだとhttpsがhttpに書き換えられてGoogle Maps呼び出せなくなるので)

src属性にあったものをjQueryで書いた"src'のところにに書いておくことによってそれを実現しています。

なお、jqueryのライブラリを事前に呼び出している場合はその記述は必要無いのですが/bodyの前とかで呼び出していると、このjQueryが動かないので、上記のコードでは

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

を間に入れています。それ以前にjQuery読み込んでいたらこれは不要です。

お試し下さい。

-テックブログ

Copyright© プラス・ムーブメント合同会社 , 2018 All Rights Reserved Powered by AFFINGER5.