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

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

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

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

maperror

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

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

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

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

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

APIキーを取得

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

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

APIキーを設定する

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

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

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

劇的 After

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

f331d34173b389eb32daa06711b5b42c

コメント

  1. levitra より:

    La Viagra no debe ser nunca tomada por pacientes que usen nitratos. disfunción eréctil y diabetes