Advanced Custom FieldのGoogle Map機能にAPIキーを登録する方法

2016年6月22日からGoogle Map APIを使用した地図に対して、Google Map APIキーの登録作業が必要になりました。この記事では、Google Map API キーの取得方法と、取得したGoogle Map APIキーを Advanced Custom FieldのGoogle Map機能を使うために、WordPressに登録する方法を紹介します。

まず、Advanced Custom FieldのGoogle Map機能とはこのようなものです。

20161010_002

フィールドタイプに「Google Map」を指定してフィールドを作り保存します。
そうすると、管理画面では、Google Mapが直接表示され、簡単に緯度と経度が取得できるはずなのですが・・・

20161010_001

テーマファイルにGoogle Map APIキーが登録されていないと、このようなエラーが表示され、Google Map APIが表示できなくなります。

ちなみに、Google Chromeのコンソールのエラーはこんな感じ

20161010_003

まったくイケてませんね。そこで Google Map API キーを取得しましょう。

まず、 Google Maps APIs for Web のページへ行き、ページ右上の「キーを取得」ボタンをクリックします。

20161010_004

そうすると、このような画面が表示されます。
「続ける」をクリックします。

20161010_005

ページが遷移して、APIキー作成ページへとジャンプします。

20161010_006

「プロジェクトを作成」が選択されたまま、「続行」ボタンをクリックします。

20161010_007

ここでAPIキーに名前をつけたり、キーに対して制限をかけたりすることができます。自分の環境に合わせて設定しましょう。

20161010_008

これでめでたくGoogle Map APIキーを作成することができました。
このAPIキーをWordPressのテーマに登録しましょう。

functions.phpに以下のように書きます。

「ここにAPIキー」のところに、さきほど取得したGoogle Map APIキーを入力します。

そうすると・・・

20161010_009

管理画面上にめでたくGoogle Mapが表示されるようになりました!

Advanced Custom FieldのGoogle Mapフィールドの使い方は以上となります。
プラグインの設定はしたけど、ちゃんと動かないなー、という人は、APIキーの登録がしっかりできているか、確認してみてくださいね。

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

あわせて読みたい


この記事をかいた人

ドレッド Webクリエイター、ライター

Webクリエイター&ライター。フリーランス目指していろいろと活動中。このブログではWeb制作やライティングでお役に立ちそうは知識から、ドレッドの雑記的な内容まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

WordPress | Posted on 2016/10/10 08:52

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です