トイレのうず

Goolge Maps のプライバシーポリシーが変更になり、 API を使って Google Maps を表示するときに API キーが必須になったみたいです。この変更は 6 月 22 日から適応されたようですが、移行期間が 10 月 12 日まであり、それ以降 Google Maps が表示されないようになるみたいです。まあ、今日 11 月 11 日現在でも API キーなしでも表示できているのですが、いつ停止されてもおかしくないので、 API キーを取得し、自作の WordPress プラグインに手を加えました。

6 月 12 日以降、 Google Maps を設置したことがないドメインに埋め込むとエラーで表示されないようです。

またこの変更で API のリクエスト回数の制限も下がったので注意が必要です。詳しくは下記をご覧ください。
→ Google Maps APIs : Standard Plan Updates

Google Maps API の取得

早速、 Google Maps API を取得します。以下のサイトにアクセスします。
→ https://developers.google.com/maps/web/

Google Maps API ウェブ向け

「キーを取得」をクリックします。

Google Maps ウェブ API をアクティベートする

取得手続きの概要が表示されるので、確認して「続ける」をクリックします。

Google APIs プロジェクトを作成

「アプリケーションを登録するプロジェクトの選択」にて「プロジェクトを作成」を選んで「続行」ボタンをクリックします。

キーの制限を設定する

「キーの制限」にて Google Maps を設置する URL を入力します。 API キーはソースを見れば誰でも使えてしまうので、アクセス元を制限することによって、不正使用を防ぐことができます。

例えばこのサイトは「 http://www.1010uzu.com/ 」ですが、これ以下のサイトすべてから Google Maps にアクセスできるようにするには「 www.1010uzu.com/* 」とします。わたしはローカルに立てているサブドメインからもアクセスを許可したかったので、「 *.1010uzu.com/* 」としました。「 * 」はワイルドカードです。

これで「作成」をクリックすれば API キーが取得できます。

Google Maps API キーの発行

API キーをコピーしてサイトに設置する JavaScript に埋め込みます。

Google Maps API キーの設置

Google Maps を表示するサイトのヘッダ部分の JavaScript に API キーを追加します。

API キーなし

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

API キーあり

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

WordPress プラグインの場合

改変するプラグインの PHP ファイルを開いて、最初の方の適当なところに以下を追加します。

//Google Maps API キー
const API_KEY = "xxxxxxxxxxx";

次に以下のように書かれているところを探します。 1 番目の引数の「 google-maps 」はプラグインにより違う可能性があります。

wp_enqueue_script( 'google-maps', 'https://maps.google.com/maps/api/js?sensor=false', array() );

以下のように key の引数を追加します。書き換えます。

wp_enqueue_script( 'google-maps', 'https://maps.google.com/maps/api/js?key=' . API_KEY . '&sensor=false', array() );

これでいつキーなしの API が停止されても安心です。

関連記事

はてなブログの Google フォト貼り付けが死んだので Blogger から URL を取得することにした話
Webサービスぼやき
はてなブログのGoogleフォト貼り付け機能が使えなくなった
はてなブログで取得した Google フォトの画像 URL が表示されない問題を解決
Webサービス
はてなブログ経由でGoogleフォトにある画像URLを取得したのが見えなくなる
Google フォトに置いているブログ画像の一部が表示されていなかった件
Webサービス
iPhoneから一部画像が表示されていないのを確認
Google が独自ブラウザを開発
Webサービス
thumbnail
最近の Google さんの偏食ぶりにもの申す
Webサービス
thumbnail
AOL Reader へ Google リーダーから移行してみた
Webサービス
AOL Reader