WordPressのプラグインsimple mapでＡＰＩキーを設定しているのに地図が表示されない。

2016年の夏ごろにGoogleが新規にGoogleMapをGoogleAPIを使って利用するにつき、APIキーの取得を義務付けたようです。Google APIを使っての地図表示の話ですので、iFrameでGoogleMapを自サイトに埋め込んでいる人には関係がありません。

数年前のGoogleMapのapi3か2かの時に、APIキーが必要で、取得した記憶がありますが、そういえばワードプレスではキーなど取得せずプラグインだけで使っていましたね。Wordpressの「SimpleMap」というプラグインでグーグルマップ表示を使っています。

夏を過ぎても普通に地図が表示されていたので、正直この問題はあまり深く考えていませんでした。

ところが、使用しているWordpress(以下WP)のプラグイン管理画面で、このSimpleMapからAPIキーの取得の警告が出るようになったので、そのままも何だな、とAPIキーを取得し設定することに。

APIキーの取得は、グーグルのdevelopers consoleという開発者向けの管理画面で行います。最初はわかりにくいですが、プロジェクトを作成し、キーの取得と制限・サイトの登録などを行います。

そして、取得したAPIキーをWPのプラグインSimpleMapの設定画面で入力保存。これでよしよし、と思っていたのですが、ある時スマホの画面ではGogoleMapが表示されていないことに気付きました。ＰＣの画面では表示されますが、ＰＣでもレスポンシブルで画面の幅を縮めて再読み込みするとGoogleMapが表示さず地図のエリアが空白です。エラーのテキスト表示は無し。

キーの制限の設定が間違っているのかといろいろ調べてみたのですが、間違ってはいないと思います。ちなみに、キー制限のリファラ―は設定アドレスは、

ドメイン名/*

という記載にしています。※先頭の「*」は不要とどこかに書いてありました。

サブドメインを有効にする場合に「*.ドメイン名/*」でしょうか。

で、検証のため別のWPサイトでもSimpleMapを使ってのGoogleMap表示を試してみたのですが（APIキーを取得・入力しての）、今度はこちらではＰＣでもモバイルでもエラーと表示される始末。

エラー内容
「このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」

エラーの回避方法は検索するとひっかかりますが、コンソールでエラー内容を確認するとAPIキーとは関係ないようでした。検索ででてくる解決方法はキーが無い云々なのでそもそも原因が違うのかな！？と。

htmlを見ると、SimpleMapがGoogleMapAPIを読み込む際のアドレスは、「googlapi.com」ではない「maps.google.com」の古いＵＲＬバージョンですよね。これは原因ではないの？とか勝手に考えたり・・。でもSimpleMapのプラグイン修正更新もないようなので、これはエラー原因ではないということなのかな！？

で、どうするか？あきらめるか？ですが・・・。

とりあえずの解決策で・・・

APIキーの設定を外しました！

解決策でもなんでもないですが、これでとりあえずは、モバイルでもＰＣでもちゃんとGoogleMapが表示されます。

そもそもGoogleのアナウンスした制限は新規サイトでのGoogleMapの利用についてのAPIキー制限なので、とりあえず既存のサイトはAPIキー入れなくでも大丈夫と言うことなんでしょう。（Google様のさじ加減次第ですが(^^;）

もちろん新しく何か判明したらまたメモします。※その後の解決策を下の方に追記しました。

しっかし、GoogleはWEBのあらゆる分野でシェアを確保しているので、WEB関連業者はもはやお上には逆らえない状況になってきましたね。今は無料で利用できているサービスが突然有料サービスに切り替わることも十分に有りうるわけです。検索、地図、解析、広告・・etc、これからもGoogleのWEB界の絶対的覇権は着実に進んで行くのでしょうね・・・。

インターホン：「ピンポーン！」

あれ、こんな時間に誰か来たみたいです、ちょっと出てきま・・・！・・・うわ、誰だお前、何をすrfgjhjadga;k……。

*****

※その後、ちゃんと解決しました！[追記翌日]

エラーが出いていたGooglMap。simplemapにAPIキーを設定してちゃんとGoogleMapの表示ができましたのその解決メモを。

修正した点は２点。

1. まずAPIの制限リファラーの設定ですが。

Google公式の記入例になっている「*.ドメイン/*」。

これはドメインの下位とドメイン手前（サブドメイン）にワイルドカードを適用した記入例になると思います。サブドメインが関係ない人は「ドメイン名/*」という記入で問題ありません。私はその記載でいけました。

2.次に、SimpleMapのプラグインの修正です。

この修正が必要がどうかは検証してないのですが、先に修正してしまってから、その後うまくマップ表示ができましたので、一応載せておきます。（※プラグイン作者が修正していないので、たぶん修正しなくていいのかな！？あくまで自己責任で。）

WPのプラグイン画面でSimpleMapの【プラグインの編集】を選びます。

simple-map.phpのソース記述内の3/5程のあたりに（行数えていません）、

public function get_api_url() {

という、APIurlの記述箇所があり、その少し下に

$url = esc_url( ‘///maps.google.com/maps/api/js’ . $apikey );

というGoogleAPIへのリンク記述があります。

このアドレスを新しいGoogleのAPIのアドレス↓↓↓に変更してみました。

$url = esc_url( ‘//maps.googleapis.com/maps/api/js’ . $apikey );

このあと、WPの記事で表示を確認しましたら、エラー表示が消えてちゃんとGoogleMapが表示されていました。

何度も言いますが、2は不要かもしれません。きちんとAPIキーの制限設定をしていたらちゃんと動くと。この問題は、夏以降に新規ドメインでWP作って、しかもGoogleMapを多用するサイトで問題になるので、実際にトラブってる人は少ないのかもしれません。

リファラーの制限も面倒だし大丈夫だろうとしない人もいるでしょうしね。

以上、何かのご参考までに。[追記記載：2016.9.30]