WordPressのプラグイン「advanced custom fields」にて住所を入力してもGoogle Mapが表示されない

Question

###【前提・実現したいこと】
Advanced Custom Fieldsを使用し、googleマップを表示させたいのですが、
投稿ページのgoogleマップに住所を入力してもプレビューに該当住所の地図が表示されません。

住所を入力したら該当の地図が表示されるようにしたいのですが、
原因がわかる方がおりましたらアドバイスをお願い致します。

###【発生している問題】
search for addressの欄に住所を入力するとプレビュー（search for address欄の下）に該当住所の地図が表示されますが、住所を入力してもデフォルトの地図ままで該当住所の地図が表示されません。

以下が色々と試してみた結果です。（例は都庁の住所です）

例１）「東京都新宿区西新宿２丁目８−１」では地図が表示されません（デフォルトの地図ままです）。

例２）「東京都新宿区西新宿」では地図が表示されません（デフォルトの地図ままです）。

例３）「東京都新宿区」では地図が表示されません（デフォルトの地図ままです）。

例４）「東京都」では県庁所在地の地図が表示されます。

上記、例４）のパターンでは表示できたので、他に試してみたところ「埼玉県」「千葉県」だと
県庁所在地の地図が表示されました。「北海道」「福岡県」「大阪府」では表示されませんでした（デフォルトの地図ままです）。
例４）のパターンでも必ず表示されるわけではないようです。

![

デベロッパーツールのconsoleに以下のwarningが表示されます。
「Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys」

###【補足情報】
WordPress 4.6
Advanced Custom Fields バージョン 4.4.8

Comments

[kei344]

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://www.buildinsider.net/web/chromedevtools/01

[yoshi01]

kei344さん、コメントありがとうございます。

デベロッパーツールのconsoleに以下のwarningが表示されています。
”Google Maps API warning: NoApiKeys”

他に似たような質問をしている方がいましたが、その方は地図の表示部分にエラー表示がでるようでした。解決策としては、ApiKeysをソースに記載すれば解決したようです。

私の場合は、ApiKeysがない状態でも、地図は表示されているので別に原因があるのかと考えていました。

Answer 1

ACFのサイト（https://www.advancedcustomfields.com/resources/google-map/）
に記載の以下２点に変更してみました。

・functions.phpに以下に差し替え

---

function my_acf_google_map_api( $api ){

$api['key'] = 'xxx';←API_KEY入力

return $api;

}

add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

---

・header.phpにHelpersに書かれているソースに差し替え

その次にgoogle APIにもともと登録をしていた「Google Maps JavaScript API」「Google Maps Embed API」の他に「Google Maps Geocoding API」を追加しました。

上記を変更したら、地図が表示できました。

Answer 2

私の場合は、ApiKeysがない状態でも、地図は表示されているので別に原因があるのかと考えていました。

Google Maps API の呼び出しに一部を除いて APIkeyが必須になったのでその影響かと思います。確認できているわけではありませんが、どうもAPIキーが必須になる前に使用したAPIはまだ使える事もあるようです。

---

解決には、下記質問のAipaさんの回答をお試しください。

【Google API - WordPressのadvanced custom fields使用時のGoogle Map入力が出来ない(39510)｜teratail】
https://teratail.com/questions/39510

Comments

[yoshi01]

functions.phpに下記を追加しましたが「Google Maps API error: RefererNotAllowedMapError」が出ます。

add_filter('acf/fields/google_map/api', function () {
return array(
'libraries' => 'places',
'key' => 'GOOGLE_API_KEY', // Googleで発行したキーを用意する
'client' => ''
);
});

[kei344]

下記記事と同じエラー内容なので、APIキーを取得する際に設定したドメインが違うか、キーの登録に少し時間がかかる問題かどちらかではないでしょうか。

【Google Mapの警告が出ている場合の原因と対応方法 【Google Map API キー発行 方法】 - ウェブと食べ物と趣味のこと】
http://www.weblog-life.net/entry/2016/03/12/080300
> よく見たら、APIキー生成する部分に「設定が有効になるまで、最大で5分かかることがあります」と書いているじゃないですか（苦笑）時間を少し置いたらそのままでエラーはなくなりました。

[yoshi01]

ACFのサイト（https://www.advancedcustomfields.com/resources/google-map/）
に記載の以下２点に変更してみました。

・functions.phpに以下に差し替え
***************************************************
function my_acf_google_map_api( $api ){

$api['key'] = 'xxx';←API_KEY入力

return $api;

}

add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
***************************************************

・header.phpにHelpersに書かれているソースに差し替え

その次にgoogle APIにもともと登録をしていた「Google Maps JavaScript API」「Google Maps Embed API」の他に「Google Maps Geocoding API」を追加しました。

上記を変更したら、地図が表示できました。
（この方法が正しいのかわかりませんが...様子をみてみます）

長い間、お付き合いありがとうございました。
kei344さんの助言が解決の糸口になりました。

[kei344]

おお、そんなページが出来ていたのですね。
APIキーの入力や出力用のJavaScriptなどは、そのうちACF本体に統合されるのでしょうね。

コメント欄にお書きになった解決方法を回答欄に書き、それをもっていったん「解決済」にされてはいかがでしょうか？よろしくお願いします。

[yoshi01]

解決済にさせていただきます。Kei344さん、ありがとうがざいました。