2016年6月22日から新規サイトでGoogle Mapsを使用する場合はAPIキーが必須になりました。おそらくドメインで判断しているのだと思いますが、今まで既存サイトで使っていた GoogleMapsは、今のところはAPIキー無しでも表示するようです。
ちなみに、GoogleMapsの表示には、ver3(現在のバージョン)ではAPIキーが必要でしたが、APIキーが無くてもサイトに地図の表示は行えました。
詳しくはこちらに発表されています。
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
対応方法
この仕様変更に伴いTCDテーマでもアップデート対応を行っておりますが、GoogleMapsを使用するためには、APIの取得をしていただく必要性がございます。といっても難しいものではございませんので、次の手順をみながらご対応をお願い致します。
APIキーの取得方法
まずは、Google Maps APIs for Webへアクセスします。
「キーを取得」のボタンを押します。
Maps Web API の有効化画面にてセレクトボックスより「My Project」などのプロジェクト名を選択し、右下の「Enable API」を押します。
画面がかわり、下記のような画面のYOUR API KEYの下にAPIキーが表示されます。
APIキーの使い方
Google Mapsを表示するには、ページのヘッダーにGoogleMaps用のScriptを読み込むコードを記入します。そのコードにAPIキーを追加するだけです。
<script src="https://maps.googleapis.com/maps/api/js?key=●●●●●"></script>
また、TCDテーマではテーマオプションにAPIキーの記入欄を設置しましたので、そちらに入力いただくだけで設定可能になっています。
TCDではgoogleMapを簡単にデザインできるプラグイン「TCD Google Maps」もご用意しております。
地図もサイトに合わせておしゃれに設置したいという方は活用くださいませ。
豊富なデザインのGoogleMapが簡単に使えるWordPressプラグイン「TCD Google Maps」
こちらのプラグインをご使用になる場合は、下記の欄にAPIキーを入力します。
キーの制限設定
必要に応じて、下記の「キーの制限」設定を行ってください。
上記画面APIキー下の「API Console. 」を押します。
すると下記のような画面が表示されます。
例えば、HTTP リファラー（ウェブサイト） を選択すると、「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の欄が表示されますので、GoogleMapsを設置するURLを登録します。ここの入力にはワイルドカード( * )が使えますので * を使ってURLを設定します。
記入例
.example.com/*
www等のサブドメインがついた example.com と下位のURL
example.com/*
example.com と下位のURLgoogleの入力欄では、「*.example.com/*」となっていますが、一番最初の「 * 」は不要です。ご注意ください。また、上記の設定でも表示されない場合は、「*」だけでなく「.」も無くして設定いただくと表示される事例がございます。
以上でマップの表示に必要なAPIキーの設定ができました。
APIキーの追加
ここまでの手順で有効になっているAPIは以下の4つになっています。
- Google Maps Embed API
- Google Maps JavaScript API
- Google Static Maps API
- Google Street View Image API
プラグインやご自身でGoogle Mapsを実装している場合にはこのAPIだけではマップが表示されない場合があります。詳しくは、こちらのAPIの表を確認いただければと思います。
必要なAPIキー
https://developers.google.com/maps/documentation/api-picker?hl=ja
TCDテーマでgoogle mapを使用するには更に、下記の6つのAPIを追加ください。
- Google Maps Directions API
- Google Maps Geocoding API
- Google Maps Elevation API
- Google Maps JavaScript API
- Google Places API for Android
- Google Places API for iOS
このAPIを追加しても表示されない場合は、GoogleMapに関する全てのAPIを有効にしてみてください。
APIキーの追加方法
それでは、追加方法を解説します。まずは、Google Developers Console Enabled APIs listへアクセスします。ここで、先ほど作成した、「My Project」を選択して「続行」を押し、「Google API」のタブをクリックします。すると、APIの一覧がでますので「Google Maps Directions API」を探してクリックしてください。
有効にするをクリックし、APIを有効化します。
これで「Google Maps Directions API」が追加されました。この順序で他のAPIも同様に行ってください。
APIキーの確認方法
もし、利用状況を知りたい場合やHTTPリファラーのURLを修正したい場合、APIキーを忘れた場合はこちらからプロジェクトを選んでください。
Google Developers Console
先ほどのGoogleMapsを設置画面が表示されますので、ここからGoogleMapsを設置するURLを再設定できます。
エラーの対処
もし、地図がうまく表示されない場合は、consoleを確認し、エラーメッセージをご確認ください。
詳しくはGoogle Maps JavaScript API のエラーコードをご確認ください。
まとめ
以上でGoogleMapsのAPIの設定方法の解説を終了します。GoogleMapが表示されなくなったという方はこちらの設定を行ってみて下さい。