ARata VOx

クッソ久しぶりに開発話です。
先日とある法人様のサイト制作を担当したのですが、その時の話を備忘録も兼ねて投稿です。

 

 

今回もWordPressを使ったサイト構築ということで、WordPressサイト制作の強い味方であるプラグイン「Advanced Custom Fields(以下ACF)」を使っておりました。投稿タイプ毎に好きな入力項目を設定できるので、対クライアント様用に分かりやすい入力フォームを作れます。とっても便利。甘えちゃう。ちなみに私が使っているのはデベロッパ向けのPRO版です。

ACF – Advanced Custom Fields

Advanced Custom Fieldsの使い方 / KoToRi Blog

 

このACFの中には簡単にGoogle Mapsを設定できる入力項目を作る機能があります。しかし最近はGoogle Mapsを使う様な案件が無かったこともあって、恥ずかしながらこの機能について半分くらい忘れておりました。今回の法人様の案件で久しぶりにGoogle Mapsを使う場面があったので、設定を進めていたら…。

 

なんすかこれ

 

これは何が起きたのかな…？と思って調べたら、そうでしたそうでした。ちょっと前にこの話してました。今年の6月22日以降に新たに制作されたサイトでGoogle Mapsを利用する場合は、APIキーが必須になったのでした。

Google Mapsを利用する場合はAPIキーが必須になったもようです / ねんでぶろぐ

 

Google Maps API v2からv3に変わるときに不要となったAPIキーが復活し、v3でもキーの取得が必要になりました。APIキーの取得自体は簡単で「Google Maps APIs for Web」にアクセスしてウンタラカンタラするともらえます。

Google Maps の APIキー を簡単に取得する / ねんでぶろぐ

 

 

使用する時は従来のAPI読み込み用のタグに「?key=XXXXXX」という風にして取得したキーをコピペするだけです(XXXXXXの部分にキーを入れます。)。

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX"></script>

もし「?sensor=false」とかオプションの値を渡している場合は、「&」を使って繋げてあげればOKです。

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=XXXXXX"></script>

 

 

 

さて、これでユーザにお見せする方のGoogleマップは正常に表示されるようになりました。

 

が！

 

WordPressの管理画面で、ACFで設定したGoogle Maps設定項目を見ると…

 

HUUuuuuuuuu！！！！

 

そうですよな。そりゃそうですよな。だってACFにGoogle Maps APIキーを設定するようなとこないもん…。でもプラグインのコアファイルいじって直すのめんどくせーっす。プラグインのアプデの度に書き換わったら超めんどいっす。

 

でもGoogle Mapsの仕様変更から約2ヶ月位経ってる訳ですし、ACF開発元でも何かあるはず！と思って見たら、ちゃんと書いてました。

Google Map / ACF

 

functions.phpに下記のコードを追加して、取得したAPIキーを突っ込みます。

function my_acf_google_map_api( $api ){
  $api['key'] = 'XXXXXX';
  return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

PRO版の場合はこっち。

function my_acf_init() {
  acf_update_setting('google_api_key', 'XXXXXX');
}
add_action('acf/init', 'my_acf_init');

 

いずれも「XXXXXX」の箇所に取得したAPIキーをコピペします。

 

 

これでちゃんと表示できる様になりました。クライアント様も安心です。