Google Map APIが表示されない
今回、WORPRESSの固定ページにブラグイン「Simple Map」を使って、Google MAPを表示させようとしたのですが、なかなか表示されずに苦労しました。
結果、その原因はGoogle Maps API の使い方の中に3つありました。
備忘録と、他にも悩まれている方のためにご紹介します。
原因は、APIの設定ミス
① RefererNotAllowedMapError
Google Maps JavaScript API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://empoh.com/?p=538&preview=true
Chromeの検証機能を使用して、コンソールを見るとこのようなエラーが発生しているのがわかります。
このエラーの原因は、「APIとサービス」の「認証情報」で行う「キーの制限」-「アプリケーションの制限」の、HTTPリファラーの設定のようです。
「この HTTP リファラー（ウェブサイト）からのリクエストを受け入れる（省略可）」 に自分のサイトのリファラーを省略形で入力します。
しかし、いくつも試してみましたが、少なくとも例にあるように「https://*.example.com/*」や「*.example.com/*」ではうまく行きませんでした。
結論、「example.com/*」と設定してください。
※「設定が有効になるまで、最大で5分かかることがあります」と書かれてますが、大抵はすぐに反映されます。が、5分近くかかることもたまにあります。でもそれ以上はいくら待ってても無駄です。
② Geocoding Service
Geocoding Service: This API project is not authorized to use this API. For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key
このエラーの原因は、同じ「認証情報」画面で行う「キーの制限」-「APIの制限」の設定でした。
「Maps JavaScript API」だけではうまく行きません。
上記のエラーに表示された「Geocoding Service」と考えられる「
Geocoding API」を追加してください。
うまく行きましたが、スマホでは
ここまでの設定で、Simple Map等が正しく記述されていれば、コンソールのエラーも解消され、サイトに地図が表示されます。
ところが、スマホでサイトを見てみると、地図が表示されていません。
画面での表示サイズなど変えてみたり、試行錯誤してみましたが、どうしてもうまく行きません。
③Maps Static API
しかし、いろいろ調べていくと、スマホでは「静的（Static）」にMapが表示されるとあります。
ならば！
先ほどの「APIの制限」画面で「Maps Static API」も追加してみます。
うまく表示されました！
終わりに
結論として、Google MapをWORDPRESSで表示するには、次の3つのAPIが必要でした。
- Maps JavaScript API
- Geocoding API
- Maps Static API
また、HTTPリファラーには次の形式で入力すること、です。
example.com/*
