Google Mapsを利用する場合はAPIキーが必須になったもようです

Google Mapsは、ver3(現在のバージョン)は「APIキーが必要」ですが APIキーが無くてもサイトに地図は表示されていました。

それが、2016年6月22日から新規サイトでGoogle Mapsを使用する場合は「APIキーが必須」になりました。
APIキーが無いと上記の画像のようにマップ部分が

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

となります。

ブラウザのコンソールではこんなエラーが表示されます。

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

※今まで既存サイトで使っていた Google Mapsは、今のところ APIキー無しでも表示するようです。(多分ドメインで判断しているのかなと思います)

Google Mapsエラー

 
参考 (詳しくはこちらをご覧ください)
Geo Developers Blog
http://googlegeodevelopers.blogspot.jp/2016/06/building-for-scale-updates-to-google.html

Google Maps APIs Standard Plan Updates
https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update

 
 

Google Maps の APIキーを取得する方法

Google Maps の APIキーを取得する方法はこちらを参考にしてください。

Google Maps の APIキー を簡単に取得する


googlemap_api_30

 
 

Google Maps の APIキーの設定方法

Google Mapsを利用する場合、ページのヘッダー(又はフッター又はbody内)に Google Maps用のScriptを読み込むコードを記入してます。
そのコードにAPIキーを追加するだけです。

APIキー無し

<script src="https://maps.googleapis.com/maps/api/js"></script>

APIキー有り

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>

※ローカル( http://localhost/ )で使用する場合は「APIキー無し」の方で利用してください。
 「APIキー無し」で だめな場合は 別に(テスト専用として) 新規で APIキーを取得して「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の所で 「localhost/*」だけで登録して「APIキー有り」の方を利用してください。
※WordPress で ちゃんとAPIキーを入れているのに、Googleマップが表示されない場合はこちらもご覧ください。
http://nendeb.com/466

 

スポンサードリンク



 

不動産プラグインの場合

不動産プラグイン(ver1.6.7~)は「不動産プラグイン基本設定」でAPIキーを設定できるようになっています。
もし、Google Maps が表示しない場合はAPIキーを登録してください。
不動産プラグイン基本設定

参考
不動産プラグイン > 初期設定 > 不動産プラグイン基本設定