Advanced Custom Fields PROを使ったGoogle Map出力

2020年5月31日 2020年6月6日

WordPressプラグイン【Advanced Custom Fields PRO】のフィールドマップ「Google Map」を使用したフロント側の出力する方法をお伝えします。

フロント側の出力設定

Google Mapを表示したい場所に下記出力コードを設置してください。

<?php
if( get_field('googlemap') ) { 
	$googlemap = get_field('googlemap'); ?>
<script src="//maps.google.com/maps/api/js"></script>
<div id="googlemaps" style="width:600px; height:400px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window,"load",function(){
	var mapdiv=document.getElementById("googlemaps");
	var myOptions = {
		zoom:17,
		center:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
		mapTypeId:google.maps.MapTypeId.ROADMAP,
		scaleControl:true
	};
	var map=new google.maps.Map(mapdiv,myOptions);
	var marker=[];
	var infowindow=[];
	marker[0]=new google.maps.Marker({
		position:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
		map:map,
		title:"<?php echo $googlemap['address']; ?>"
	});
});
</script>
<?php } ?>

Google Mapを表示するための重要な基本設定

Advanced Custom Fields PROの設定と出力コードを設置するだけでは、目的の場所にGoogleマップを表示することはできません。

Google Mapを表示するためには、APIキーを取得する必要があるのです。
下記サイトからAPIキーを取得してください。

Google APIキー

https://cloud.google.com/maps-platform/

headにJavascriptを設置

APIキーを発行した後は、下記コードをheader.phpのhead内に設置します。

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

fucntion.phpへの記述

headに記述したJavascriptのxxxxxxxxxxxxxxxx部分に、APIキーを適用するためにfunction.phpに下記コードを記述してください。

/* 【ACF Google map API】取得した API key を指定 */
function my_acf_google_map_api( $api ){
  $api['key'] = 'xxxxxxxxxxxxxxxx’; // API key を指定
  return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api’);

まとめ

以上のような方法で、Wordpressプラグイン【Advanced Custom Fields PRO】のフィールドマップ「Google Map」を表示することができます。
注意していただきたいポイントは、APIの仕様変更やwordpress・プラグインなどのバージョンによって、GoogleMapが表示されなくなる場合もあるので、よく使う方は最新の情報に気を付けてください。

GoogleMapをレスポンシブ対応にしたい場合は下記ページも参考にしてください。