WordPress

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に以下のように書きます。

function my_acf_google_map_api( $api ){
$api['key'] = 'ここにAPIキー';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

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

そうすると・・・

20161010_009

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

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

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。記事執筆・ホームページ制作・メディア運営・コンサルティングのお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

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

CAPTCHA