2019年版【Google Maps API】の設定方法とエラー

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/*

スポンサーリンク