Advanced Custom FieldsでGoogleMapの使用する方法

Advanced Custom FieldsでGoogleMapを使用したかった。設定上から選ぶことはできるが、そのままだと記事投稿ページでエラーが発生していた。この辺の対応策と、実際のページ表示方法をメモ。

エラーの対処

APIキーを設定していないというのが原因でエラーが発生している模様。テーマファイルのfunctions.phpに以下を追加する。

define('MAP_API_KEY', 'xxxxxxxxxxxxxxxxxxxxxx');

function my_acf_google_map_api( $api ){
    $api['key'] = MAP_API_KEY;
    return $api;
}

キーを定数に入れているのは他ページでも使う為。

MySQLの保存状態

postmetaテーブルで以下のようシリアライズされた形で保存される。

a:3:{s:7:"address";s:57:"住所";s:3:"lat";s:9:"緯度";s:3:"lng";s:18:"経度";}

取得と表示方法

#以下で取得
$gmap = get_field('キー名');

#以下で出力
echo $gmap['lat']; //経度
echo $gmap['lng']; //緯度
echo $gmap['address']; //住所

GoogleMapの表示

iframeで埋め込む場合

iframeで埋め込む方法場合は以下の通り。1件のみ表示させたいような場合はこちらの方法が楽。

<?php $gmap = get_field('キー名');?>
<iframe src="https://maps.google.co.jp/maps?ll=<?php echo $gmap['lat'];?>,<?php echo $gmap['lng'];?>&q=<?php echo $gmap['address'];?>&output=embed&t=m&z=14" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="width:640px; height:400px; max-width: 100%;"></iframe>

JavaScriptで出力する場合

JavaScriptで出力する場合は以下の通り。複数表示させたい場合はこちらになる。

<div id="map_canvas" style="width:500px; height:500px;"></div>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=<?php echo MAP_API_KEY;?>&libraries=visualization"></script>
<script>
var mapData = [
    <?php while( $the_query->have_posts() ){ ?>
        <?php $the_query->the_post(); ?>
        <?php $gmap = get_field('googlemapのキー名');?>
        { 'x':'<?php echo $gmap["lat"];?>', 'y':'<?php echo $gmap["lng"];?>', 'link': '<?php the_permalink() ?>'}, 
    <?php } ?>
];
var minLat = 999;
var maxLat = 0;
var minLng = 999;
var maxLng = 0;

var currentWindow = null;

var latlng = new google.maps.LatLng(mapData[0].x, mapData[0].y);
var myOptions = {
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//マーカークラスタリング用の配列
var clusterer = [];

for (var key in mapData){
    var marker_data = makeMarker(mapData[key]);
    //マーカー情報をクラスタリング用の配列に突っ込む
    clusterer.push(marker_data);
}

//マップにマーカークラスターを追加
var markerCluster = new MarkerClusterer(map, clusterer, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

autoZoom( maxLat, minLat, maxLng, minLng );

function makeMarker( mapData ){
    if( !mapData ) return false;

    if(mapData.x < minLat) minLat = mapData.x;
    if(mapData.x > maxLat) maxLat = mapData.x;
    if(mapData.y < minLng) minLng = mapData.y;
    if(mapData.y > maxLng) maxLng = mapData.y;

    var marker = new google.maps.Marker({
        position : new google.maps.LatLng(mapData.x,mapData.y), 
        map: map 
    });

    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', function() {
        if( currentWindow ) currentWindow.close();

        var tmp = '<a href="'+mapData.link+'">記事へリンク</a>';
        infoWindow.setContent(tmp);
        infoWindow.open(map,marker);
        currentWindow = infoWindow;
    });
    return marker;
}

function autoZoom( maxLat, minLat, maxLng, minLng ){
    if( !maxLat || !minLat || !maxLng || !minLng ) return false;

    var sw = new google.maps.LatLng(maxLat,minLng);
    var ne = new google.maps.LatLng(minLat,maxLng);
    var bounds = new google.maps.LatLngBounds(sw, ne);
    map.fitBounds(bounds);
}
</script>

まとめ

GoogleMapのフィールドを使うと経度緯度と住所が入るので使いやすい。また、ダッシュボード上からも使いやすくなる。