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 を設置する URL を入力します。 API キーはソースを見れば誰でも使えてしまうので、アクセス元を制限することによって、不正使用を防ぐことができます。
例えばこのサイトは「 http://www.1010uzu.com/ 」ですが、これ以下のサイトすべてから Google Maps にアクセスできるようにするには「 www.1010uzu.com/* 」とします。わたしはローカルに立てているサブドメインからもアクセスを許可したかったので、「 *.1010uzu.com/* 」としました。「 * 」はワイルドカードです。
これで「作成」をクリックすれば 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 が停止されても安心です。
