WordPressのadvanced custom fields使用時のGoogle Map入力が出来ない

###前提・実現したいこと
Advanced Custom Fieldsを使用し、googleマップを表示させたいのですが、
固定ページでgoogleマップの部分が入力出来なくなっています。

原因の特定と、改善をしたいのですが、どこから手をつければいいか分かりません。
同じ現象が起きた方、若しくは解決の手口が分かる方、おられましたらアドバイスをお願いします。

###発生している問題・エラーメッセージ
googleマップの入力項目を掲載します。

**■管理画面のエラー箇所のHTMLソース**
<div id="acf-googlemap" class="field field_type-google_map field_key-field_5301cbd7eb249" data-field_type="google_map" data-field_key="field_5301cbd7eb249" data-field_name="googlemap">
<p class="label">
<label for="acf-field-googlemap">Googlemap</label>
</p>
<div class="acf-google-map " data-zoom="14" data-lng="144.96328" data-lat="-37.81411" data-id="acf-field-googlemap">
<div style="display:none;">
<input class="input-address" type="hidden" value="" name="fields[field_5301cbd7eb249][address]">
<input class="input-lat" type="hidden" value="" name="fields[field_5301cbd7eb249][lat]">
<input class="input-lng" type="hidden" value="" name="fields[field_5301cbd7eb249][lng]">
</div>
<div class="title">
<div class="has-value">
<a class="acf-sprite-remove ir" title="Clear location" href="#">Remove</a>
<h4></h4>
</div>
<div class="no-value">
<a class="acf-sprite-locate ir" title="Find current location" href="#">Locate</a>
<input class="search gm-err-autocomplete" type="text" placeholder="Oops! Something went wrong." autocomplete="off" disabled="" style="background-image: url("https://maps.gstatic.com/mapfiles/api-3/images/icon_error.png");">
</div>
</div>
<div class="canvas" style="height: 400px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div class="gm-err-container">
<div class="gm-err-container">
</div>
</div>

###試したこと
プラグインのアップデート
Advanced Custom Fields 4.4.7を入れても改善しませんでした。
現在は4.4.0に戻しています。

###補足情報(言語/FW/ツール等のバージョンなど)
■環境
WordPress 4.5.3
Advanced Custom Fields 4.4.0

行動規範の内容に同意します

回答2件

全く同じ事象にハマったことがあり、色々試してみたところ、下記で対応出来ましたので共有ですー。
※すでに解決済みでしたらさーせん。

テーマのなかに置いてある、functions.phpに下記を足したところ、自分の環境では解決することができました。

php
1<?php
2...
3/**
4 * acfでgoogle mapでエラーがでるのでそれを修正
5 */
6add_filter('acf/fields/google_map/api', function () {
7	return array(
8		'libraries' => 'places',
9		'key'	    => 'GOOGLE_API_KEY', // Googleで発行したキーを用意する
10		'client'     => ''
11	);
12});

advance custom fieldのコードを読んでみたところ、input_admin_footer()というメソッドにて、$apiのkeyやらなんやらを差し込むコードがあったので、それにフックしてapi keyを渡すようにすれば解決できました。

php
1<?php
2...
3   	function input_admin_footer() {
4	   	
5	   	// vars
6	   	$api = array(
7			'libraries'		=> 'places',
8			'key'			=> '',
9			'client'		=> ''
10	   	);
11	   	
12	   	
13	   	// filter
14	   	$api = apply_filters('acf/fields/google_map/api', $api);
15	   	
16	   	
17	   	// remove empty
18	   	if( empty($api['key']) ) unset($api['key']);
19	   	if( empty($api['client']) ) unset($api['client']);

ちなみに、GOOGLE_API_KEYは、下記サイトを参考にしたら発行できました。

http://nendeb.com/276

投稿2016/07/29 08:03

編集2016/07/29 08:05

Aipa

総合スコア43

Google Maps API の呼び出しに APIkeyが必須になったからだと思われます。

【Google Maps field needs setting to add API key - ACF Support】
https://support.advancedcustomfields.com/forums/topic/google-maps-field-needs-setting-to-add-api-key/#post-40161

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