WordPress:Advanced Custom Fieldsを使ってGoogle Mapに複数のマーカーを設定する

カスタムフィールドの値を使って Google Map に複数のマーカーを設定するのに苦戦したのでメモ書きを。(※この記事は2018.10.30現在の情報です。Google Map の仕様変更などで想定通りに動作しなくなる可能性がありますのでご注意ください。)

Advanced Custom Fields(以下、ACF )で Google Map のAPI KEY の設定など済ませておきます。
管理画面などでエラーが出ているときは ACF の Google Map フィールドのドキュメントページ 参考にしてください。

Google Map を設置したい部分に以下のコードを記述します。

<div id="map" style="width: 800px; height: 620px; border: solid ccc 1px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=google_api_key_here"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById( 'map' );
var myOptions = {
zoom: 15,
center: new google.maps.LatLng( 35.728264,139.718276 ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map( mapdiv, myOptions );

var marker = [];
var infowindow = [];

<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?>
<?php while (have_posts()) : the_post(); ?>

marker[<?php echo $m++; ?>] = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/pink-pushpin.png',
<?php
if( get_field('map') ) { 
$googlemap = get_field('map'); ?>
position: new google.maps.LatLng( <?php echo $googlemap['lat']; ?>,<?php echo $googlemap['lng']; ?> ),
<?php } ?>
map: map,
title: '<?php the_title(); ?>'
});
infowindow[<?php echo $i++; ?>] = new google.maps.InfoWindow({
content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>',
size: new google.maps.Size( 50, 30 )
});
google.maps.event.addListener( marker[<?php echo $m1++; ?>], 'click', function() {
infowindow[<?php echo $i2++; ?>].open( map, marker[<?php echo $m2++; ?>] );
});
<?php endwhile; // End the loop. Whew. ?>
</script>

上のコードのとても簡単な説明を少し……

<div id="map" style="width: 80%; height: 620px; border: solid red 1px;"></div>

この DIV の width と height の数値を設定しないとマップが表示されないのでかならず横幅と高さは設定してください。

zoom: 15,
center: new google.maps.LatLng( 35.728264,139.718276 ),

zoom レベルと center の LAT、LNG 数値は任意です。

参考サイト:WordPressとプラグインを使ってお店紹介サイトを作る方法
にコードのとても詳しい説明があります。

あと、もっといいやり方を知ってるって方がいらっしゃったら、ぜひ教えてくれるととても喜びます(‘ω’)

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください