このブログは、俺が食べあるいたお店のレポを書いてまとめてるのですが。
WordPressのプラグイン「Advanced Custom field」(通称: ACF)を使い、食レポのエントリの末尾に店舗情報(店名・住所・Wifiの有無とか)を入力するフォームを設けてそれを出力しています。
「住所」をいれると自動的にGooglemapを出力してくれる機能がACFには備わってて手動でGooglemapから <iframe> のタグを引っ張ってこなくていいんです。

そして、「食べ歩きマップ」のページに各エントリで投稿したGooglemapの情報を一覧にまとめて表示できるようにしています。

個人的に、出先から近場でどこが美味しかったかなーとかってのをすぐ振り返りたくてつくった自己満のページなのですがね…汗

で、「各エントリの末尾」と「食べ歩きマップ」の2箇所にGoogemapを描画させようとしたときに手こずったのでここに備忘録として。

問題点1. Googlemapが描画されない

表示させるためのコードを該当と思われるところにぺぺッと貼っていざ表示！しようとすると…マップが描画されてない。

コンソールログを見てみると下記のエラーが表示。

You have included the Google Maps API multiple times on this page

ふむふむ…？
どうやら、Googlemaps の APIコードが2度も読まれてるぜ！ってことらしい。
ソースコードをみてみると、APIを呼び出すコードが2箇所に書かれてた。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key= ********** &callback=initMap"></script>

↑こいつがヘッダー部分とフッター部分で出力されている。
じゃあ、どちらか1つを消せばいい。ってわけで、functions.php に書いてある下記を削除。

add_action( 'wp_footer', 'add_footer_enqueue_scripts_googlemaps_js', 99 );

第二引数の ‘add_footer_enqueue_scripts_googlemaps_js’ には API Keyの文字列。
‘add_action’ と ‘wp_footer’ ってので『フッターに第二引数を追加するよ』って指示を出しているっぽい。

ヘッダーでも読まれてるなら、フッターでの読み込みをなくせばいいんじゃないか！ってことで上記のコードをコメントアウト。

すると…

問題点2. 片側しか表示されない

食べ歩きマップのページでは描画させることに成功！
エントリ部分をみると描画されてない…あれれ〜？
もう1つのAPI Key を出力してる部分を探すと同じく functions.php 内にあった。

// ACF用のAPI KEYを設定
function my_acf_google_map_api( $api ){
  $api['key'] = '***************'; // API Keyを指定
  return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

ちなみにこいつはヘッダーで読まれている箇所っぽい。
ならば ‘wp_footer’ で読ませてこいつを消せばいいのだ！

というわけでいざ実行！するとエントリで地図が描画された！
すると今度は食べ歩きマップで描画されてない…。はて。
どっちかの関数をあててみたり、新しく関数つくってそこからAPI Keyをひっぱたりしてみたものの、ダメ。

‘add_action’ で ‘wp_footer’ で読まれている所をヘッダーに変えてみてはどうだろうか。
‘wp_footer’ から ‘wp_head’ へ変えてプレビュー。

// wp_footerでincludeさせると記事部分のMap描画と衝突するので、wp_headで読み込み
add_action( 'wp_head', 'add_footer_enqueue_scripts_googlemaps_js', 99 );

できたーーー！
何でこれでうまくいったのかはわからなかったけど、これでヘッダー1箇所のみで読み込まれて両方のページでマップを出力することができました。
色々試したのになんだか呆気ない…。まぁ、今のところ無事に動いてるので良しとしよう。