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で埋め込む方法場合は以下の通り。1件のみ表示させたいような場合はこちらの方法が楽。
<?php $gmap = get_field('キー名');?> <iframe src="http://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で出力する場合は以下の通り。複数表示させたい場合はこちらになる。
<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のフィールドを使うと経度緯度と住所が入るので使いやすい。また、ダッシュボード上からも使いやすくなる。
関連記事
-
-
WPのget_the_contentsでpタグが挿入されない
WordPressのテーマを編集した際に表示が崩れるという症状が発生した。編集内 ...
-
-
ACFでセレクトメニューを動的に生成
WordPressでカスタムフィールド設定用のプラグインAdvanced Cus ...
-
-
WordPressでカスタムフィールドとCSVファイル投稿
WordPressでカスタムフィールド設定している環境に、CSVファイルアップロ ...
-
-
GoogleMapAPIでジオコーディングできない
住所から経度緯度を取得するジオコーディングをGoogleMapAPIを用いて行お ...
-
-
GASでNintendo Storeをチェックし指定したソフトが〇円以下の際に通知する方法
Nintendo Storeで指定したソフトが指定した価格以下もしくは未満の際に ...
-
-
WordPressを外部サーバから投稿する方法
WordPressをダッシュボードからではなく、外部サーバのプログラムから投稿し ...
-
-
GoogleMapでマーカーをまとめる
GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...
-
-
GASを使ってみて感じたメリットとデメリット
Google Apps Scriptを色々勉強した中で感じたメリットとデメリット ...
-
-
WordPressのWP-Mail-SMTPプラグインが動かない
PHPのバージョンを下げてからWordPressで外部メールサーバが使えるWP- ...
-
-
WordPress Popular Postsのサムネイルが表示されない
WordPressの人気記事を表示させるWordPress Popular Po ...