Advanced Custom Fieldsを使って個別ページにGoogleMapを表示しているのですが、
さらに一覧ページで一つの地図の中に複数マーカーとして表示したいです。
下記サイトが理想です。
http://www.816chubu.jp/condominium/index.html
一覧ページのループ内で公式にある複数箇所にマーカーをする下記コードを入れてみたのですが表示されませんでした。
<?php if( have_rows('map') ): ?> <div class="acf-map"> <?php while ( have_rows('map') ) : the_row(); $location = get_sub_field('location'); ?> <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> </div> <?php endwhile; ?> </div> <?php endif; ?>
コンソールで確認したところエラーもなく、ソースを見てもGoogleMapの箇所だけすっぽり抜けています。
WordpressやGoogleMapのカスタマイズに詳しい方アドバイスをお願いいたします。
追記です
HTML
1<section class="container"> 2 <!-- map --> 3 4 <div class="list_wrap"> 5 <ul id="taxid_10"> 6 <li> 7 <div class="postthmub"> <a href="#"><img src="/wp-content/uploads/2016/11/s_DSC_3471-300x200.jpg" alt="137" width="" height=""></a> </div> 8 <dl class="postItem"> 9 <dt><a href="#">土地01</a></dt> 10 <dd></dd> 11 </dl> 12 </li> 13 <li> 14 <div class="postthmub"> <a href="#"><img src="/wp-content/uploads/2016/11/s_DSC_3471-300x200.jpg" alt="137" width="" height=""></a> </div> 15 <dl class="postItem"> 16 <dt><a href="#">土地02</a></dt> 17 <dd></dd> 18 </dl> 19 </li> 20 </ul> 21 </div> 22 <!-- end .list_wrap --> 23 24</section> 25<!-- end container --> 26
2行目の<!-- map -->
の部分にコードを入れています。
再度追記いたしました。
ヘッダー内で次を読み込んでいます。
<!-- googlemap api --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQHa0hNePDGP1oIKswgeyeY84pHhbvAJQ"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/googlemap.js"></script>
googlemap.js
javascript
1(function($) { 2 3/* 4* new_map 5* 6* This function will render a Google Map onto the selected jQuery element 7* 8* @type function 9* @date 8/11/2013 10* @since 4.3.0 11* 12* @param $el (jQuery element) 13* @return n/a 14*/ 15 16function new_map( $el ) { 17 18 // var 19 var $markers = $el.find('.marker'); 20 21 22 // vars 23 var args = { 24 zoom : 16, 25 center : new google.maps.LatLng(0, 0), 26 mapTypeId : google.maps.MapTypeId.ROADMAP 27 }; 28 29 30 // create map 31 var map = new google.maps.Map( $el[0], args); 32 33 34 // add a markers reference 35 map.markers = []; 36 37 38 // add markers 39 $markers.each(function(){ 40 41 add_marker( $(this), map ); 42 43 }); 44 45 46 // center map 47 center_map( map ); 48 49 50 // return 51 return map; 52 53} 54 55/* 56* add_marker 57* 58* This function will add a marker to the selected Google Map 59* 60* @type function 61* @date 8/11/2013 62* @since 4.3.0 63* 64* @param $marker (jQuery element) 65* @param map (Google Map object) 66* @return n/a 67*/ 68 69function add_marker( $marker, map ) { 70 71 // var 72 var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); 73 74 // create marker 75 var marker = new google.maps.Marker({ 76 position : latlng, 77 map : map 78 }); 79 80 // add to array 81 map.markers.push( marker ); 82 83 // if marker contains HTML, add it to an infoWindow 84 if( $marker.html() ) 85 { 86 // create info window 87 var infowindow = new google.maps.InfoWindow({ 88 content : $marker.html() 89 }); 90 91 // show info window when marker is clicked 92 google.maps.event.addListener(marker, 'click', function() { 93 94 infowindow.open( map, marker ); 95 96 }); 97 } 98 99} 100 101/* 102* center_map 103* 104* This function will center the map, showing all markers attached to this map 105* 106* @type function 107* @date 8/11/2013 108* @since 4.3.0 109* 110* @param map (Google Map object) 111* @return n/a 112*/ 113 114function center_map( map ) { 115 116 // vars 117 var bounds = new google.maps.LatLngBounds(); 118 119 // loop through all markers and create bounds 120 $.each( map.markers, function( i, marker ){ 121 122 var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() ); 123 124 bounds.extend( latlng ); 125 126 }); 127 128 // only 1 marker? 129 if( map.markers.length == 1 ) 130 { 131 // set center of map 132 map.setCenter( bounds.getCenter() ); 133 map.setZoom( 16 ); 134 } 135 else 136 { 137 // fit to bounds 138 map.fitBounds( bounds ); 139 } 140 141} 142 143/* 144* document ready 145* 146* This function will render each map when the document is ready (page has loaded) 147* 148* @type function 149* @date 8/11/2013 150* @since 5.0.0 151* 152* @param n/a 153* @return n/a 154*/ 155// global var 156var map = null; 157 158$(document).ready(function(){ 159 160 $('.acf-map').each(function(){ 161 162 // create map 163 map = new_map( $(this) ); 164 165 }); 166 167}); 168 169})(jQuery);
回答1件
あなたの回答
tips
プレビュー