WordPress: Advanced Custom Fields の Google Map フィールドが入力できない時

便利ですよね、Advanced Custom Fields プラグイン。

Google Map座標も簡単に記事投稿できちゃう！
という言葉に釣られてプラグインをインストールしてみたものの、こんな表示になってなんだよコレ・・・。

になってしまった時の対応策です。

1 Google Maps APIのAPIキーが必要なんです
2 APIキーを取得
3 APIキーを設定する
4 劇的 After

Google Maps APIのAPIキーが必要なんです

ブラウザのコンソールを覗いてみるとわかるんですが、”Google Maps APIキーが無いよ”って怒られているはずです。

See the JavaScript console なんて遠回しに言わずに、その場に出すぐらいの親切さがあってもいいのに・・・。

とある時期からGoogle Maps関連のAPI利用にはAPIキーの指定が必須になった為、それ以前から利用してるユーザーは問題が無いケースもあるようですが、以降の新規利用ユーザーは”キーがないよ”と必ず怒られるようになったんです。

それでいて、以前の方々が書いたACF便利！ Google Maps ひゃっほう！って記事がヒットしちゃうので新規導入の方がなんだよコレ・・・。になる罠に嵌るわけですね。

APIキーを取得

ということですので、Google API Console から、APIキーを取得しなければなりません。
取得はねんでぶろぐさんの

Google Maps の APIキーを取得する

Googleマップを表示させるには APIキーが必要です。APIキーを取得する場合は「Google Cloud Platform」でプロジェクトを作成し、プロジェクト内でAPIキーを作成・請求先アカウントを紐づけるという作業が必要です。ここでは新しくプロジェクトを作成し、APIキー取得と請求先アカウントの設定方法...

nendeb.com

を参考に簡単に取得しちゃえば良いと思います。

APIキーを設定する

実際に怒られエラーが起きている箇所は、Google Maps を使おうと読み込みをしている場所なんですが、
それらを逐一潰さずとも、予めキーつきのAPIを先行して呼び出しておけば、以降のエラーは起きなくなります。

ACFサポートフォーラムに、こうすると良いよの実コードがあったので引用です。

function nr_load_scripts() {
    wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=XXX',null,null,true);  
    wp_enqueue_script('googlemaps');
}
add_action('wp_enqueue_scripts', 'nr_load_scripts');

function nr_load_scripts() {

wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=XXX',null,null,true);

wp_enqueue_script('googlemaps');

}

add_action('wp_enqueue_scripts', 'nr_load_scripts');

key=XXXに、取得したAPIキーを埋め込んだ状態で、functions.phpへコードを追加すればOKです。

劇的 After

はい、エラーが起きずに地図が表示されるようになりました！