###WordPress ACFからGoogleMapリスト表示からマーカーを開く方法
お助け下さい!
当方JavaScriptが分からずGooglemapで困っております。
###出来ていること
WordPressプラグインの「acf:Repeater Field」でGoogleMapを複数登録し、マップ表示まで出来ました。
マップ上の「marker」をクリックすると「情報ウィンドウ」を開くまでは出来ましたが、「マップ下のリスト」「サイト内マップで表示(ボタンクリック)」からのマップ内の「情報ウィンドウ」を開く方法が分かりません。
acfからは
data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"
上記phpでカスタムフィールドから位置情報を取得しています。
###phpコード
<!-- acf 地図表示 --> <?php if( have_rows('map') ): ?> <div class="acf-map"> <?php while ( have_rows('map') ) : the_row(); $location = get_sub_field('map_parts'); ?> <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> <h4><?php the_sub_field('map_title'); ?></h4> <p class="address"><?php echo $location['address']; ?></p> <p class="text-center"><a href="http://maps.google.com/maps?q=<?php echo $location['address']; ?>+<?php the_sub_field('map_title'); ?>" class="btn btn-danger" target="_blank">Googleマップで開く</a></p> <p class="text-center"><?php the_sub_field('map_text'); ?></p> </div> <?php endwhile; ?> </div> <!-- acf リスト表示 --> <div class="marker_click_box"> <?php while ( have_rows('map') ) : the_row(); $location = get_sub_field('map_parts'); ?> <h4><?php the_sub_field('map_title'); ?></h4> <p class="text-center"> <button class="btn btn-danger marker_click" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">サイト内マップで表示</button> <a href="http://maps.google.com/maps?q=<?php echo $location['address']; ?>+<?php the_sub_field('map_title'); ?>" class="btn btn-danger" target="_blank">Googleマップで開く</a> </p> <?php endwhile; ?> <?php else: ?> <!-- 入力が無い場合の処理 --> <?php endif; ?> </div>
###jsコード
(function($) { function new_map( $el ) { var $markers = $el.find('.marker' ,'.marker_click'); var args = { zoom : 16, center : new google.maps.LatLng(0, 0), mapTypeId : google.maps.MapTypeId.ROADMAP }; // create map var map = new google.maps.Map( $el[0], args); // add a markers reference map.markers = []; // add markers $markers.each(function(){ add_marker( $(this), map ); }); // center map center_map( map ); // return return map; } function add_marker( $marker, map ) { var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); // create marker var marker = new google.maps.Marker ({ position : latlng, map : map }); // add to array map.markers.push( marker ); // if marker contains HTML, add it to an infoWindow if( $marker.html() ) { // create info window var infowindow = new google.maps.InfoWindow({ content : $marker.html() }); // show info window when marker is clicked google.maps.event.addListener(marker, 'click', function() { infowindow.open( map, marker ); }); } } function center_map( map ) { var bounds = new google.maps.LatLngBounds(); // loop through all markers and create bounds $.each( map.markers, function( i, marker ){ var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() ); bounds.extend( latlng ); }); // only 1 marker? if( map.markers.length == 1 ) { // set center of map map.setCenter( bounds.getCenter() ); map.setZoom( 16 ); } else { // fit to bounds map.fitBounds( bounds ); } } var map = null; $(document).ready(function(){ $('.acf-map').each(function(){ // create map map = new_map( $(this) ); }); }); })(jQuery);
###試したこと
https://ghweb.info/post-3762.html
上記サイトでやりたいことが見つかったのですが、位置情報をphpから取得しているので変換する方法が分かりませんでした。
http://www.actzero.jp/developer/report-18564.html
こちらのサイトだとかなり近かったのですが、JSONにしなくても出来そうかとトライしましたが挫折してしまいました・・・。
###補足情報(言語/FW/ツール等のバージョンなど)
Wordpress4.8.2
GoogleMap APIキー取得済み
何とか実装したいと思っております。
どなたかお助け下さい。
宜しくお願い致します。
###JSコード追記部分
var mclick = []; (function($) { function new_map( $el ) { var $markers = $el.find('.marker' ,'.marker_click'); var args = { zoom : 16, center : new google.maps.LatLng(0, 0), mapTypeId : google.maps.MapTypeId.ROADMAP }; // create map var map = new google.maps.Map( $el[0], args); // add a markers reference map.markers = []; // add markers $markers.each(function(){ mclick.push( add_marker( $(this), map ) ); }); // center map center_map( map ); // return return map; } function add_marker( $marker, map ) { var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); // create marker var marker = new google.maps.Marker ({ position : latlng, map : map }); // add to array map.markers.push( marker ); // if marker contains HTML, add it to an infoWindow if( $marker.html() ) { // create info window var infowindow = new google.maps.InfoWindow({ content : $marker.html() }); // show info window when marker is clicked google.maps.event.addListener(marker, 'click', function() { infowindow.open( map, marker ); }); } return marker; } function center_map( map ) { var bounds = new google.maps.LatLngBounds(); // loop through all markers and create bounds $.each( map.markers, function( i, marker ){ var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() ); bounds.extend( latlng ); }); // only 1 marker? if( map.markers.length == 1 ) { // set center of map map.setCenter( bounds.getCenter() ); map.setZoom( 16 ); } else { // fit to bounds map.fitBounds( bounds ); } } // global var var map = null; $(document).ready(function(){ $('.acf-map').each(function(){ // create map map = new_map( $(this) ); }); }); })(jQuery);
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/26 01:17
2017/09/28 10:50
2017/09/28 11:00
2017/09/28 11:57
2017/09/28 13:04
2017/09/30 02:22 編集
2017/09/30 01:02
2017/09/30 02:35