Wordpressの個別記事にGoogle Mapが表示されません（Advanced Custom Fields使用）

###前提・実現したいこと
Wordpressのプラグイン「Advanced Custom Fields」を使用して投稿した個別ページに
Google Mapを表示したいです。

2016年6月22日からGoogle Mapの表示には
APIキーが必須になったとのことですが、
無事APIキーは取得できまして、
functions.phpにAPIキーのコードを記載したところ、
投稿画面でGoogle Mapを表示することはできました。

###発生している問題・エラーメッセージ
上記でGoogle Map入りの記事を投稿したのですが、
該当する記事ページにGoogle Mapが表示されません。
エラーメッセージ的なものも表示されず、スルーです。

###single.phpに記載した内容
ACF公式サイト（https://www.advancedcustomfields.com/resources/google-map/）からコピペしました。


<?php $location = get_field('フィールド名'); 
if( !empty($location) ): ?>
<div class="acf-map"> 
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div> 
</div> 
<?php endif; ?>

###header.phpに記載した内容

APIキーに関しては投稿画面にGoogle Mapを表示させるために「functions.php」に記載してあるので、
header.phpにも必要なのかどうか分からなかったのですが、一応
http://design-plus1.com/tcd-w/2016/06/google-maps.html
を参考に記載しました。

このコードを記載するとしても
header.phpに書くべきかは自信ありません・・・。

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

###試したこと
上記2点を設定した状態で、
投稿画面のGoogle Mapのカスタムフィールドに
地図を表示させたい住所を入力して投稿しただけなのですが、

何か抜けていたり間違いがあればご指摘いただければ幸いです。

###補足情報(言語/FW/ツール等のバージョンなど)
WordPress 4.7
Advanced Custom Fields 4.4.11

退会済みユーザー

2016/12/21 11:33

「該当する記事ページ」のHTMLソースを見たとき、`<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>`は記述されていますか？　また、関係ないかもしれませんが、WordPressでJSを読み込ませるときは、wp_enqueue_script関数を使うことが推奨されていますので、試してみてはいかがでしょうか？

pokopokokick

2016/12/21 12:16 編集

miz様、ご返信ありがとうございます。記事ページのソースを確認したところ、head部分に、「<script src="https://map～略」が記述されていました。しかし地図が表示されて欲しい箇所、「<?php $location = get_field('フィールド名');～略」に該当するソース部分には何も表示されていませんでした。例：single.php内に【あいうえお<?php $location～略～endif; ?>かきくけこ】と記述した時の個別ページのHTMLソース→【あいうえおかきくけこ】　こういうものなのかどうかは分からないですが・・。wp_enqueue_script関数はまだ良くわかっていないので、これから探ってみようと思います。

退会済みユーザー

2016/12/21 12:19

`<div class="acf-map">～`などが表示されていないということは、$locationに値が入っていない（empty）なのでは？と思います。get_filedで取得しているカスタムフィールド名が確かに正しいかも確認してみてください。

pokopokokick

2016/12/21 12:38

miz様ご返信ありがとうございます。カスタムフィールド部分を再度確認し、間違ってはいないと思うのですが念のためコピペで上書きして保存、そして個別ページも更新ボタンを押してみたところ、変化がありました。先ほどまで記事ページのソースが空白だったのですが、再度読み込んでみると【「<div class="acf-map"> <div class="marker" data-lat="34.6696265" data-lng="135.51753940000003"></div> </div> 】と表示されていました。Google Mapは表示されないままなのですが、一歩前進でしょうか・・。

退会済みユーザー

2016/12/21 13:46

https://www.advancedcustomfields.com/resources/google-map/にあるJSとCSSのコードはコピペしてますか？

pokopokokick

2016/12/21 13:57

それはコピペしてませんでした（汗）そしてコピペしてみたら上手く地図が表示されました！そのコードも必須だったんですね・・。ともあれ、miz様のおかげで解決しました。とても助かりました！本当にありがとうございました！m(_ _)m