WordpressのAdvanced Custom Fields Repeater Fieldを使ったGoogleMapのマップ外リスト表示からマーカーを開く方法

###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件

ベストアンサー

グローバル変数を用意して空の配列を入れておく
add_marker関数でmarkerをreturnする仕様にする
$markers.eachの中で、グローバル変数.push( add_marker( $(this), map ) );とする

という感じでできると思います。

投稿2017/09/25 11:28

kei344

総合スコア69400

Tokiyo

2017/09/26 01:17

早速のご返信ありがとうございます！早速やってみます。

Tokiyo

2017/09/28 10:50

kei344様何度も質問申し訳ありません。 JavaScriptに関して素人過ぎて・・・調べても上手くいきませんでした。 1.グローバル変数を用意して空の配列を入れておくこれは「mclick = [];」この様な記述で良いでしょうか？ 2.add_marker関数でmarkerをreturnする仕様にするこちらがググってもワードが引っかからずどうしても分かりませんでした。どの様に記述すれば宜しいでしょうか？ 3.$markers.eachの中で、グローバル変数.push( add_marker( $(this), map ) );とするこちらは「１」で指定した変数「mclick.push( add_marker( $(this), map ) );」と指定しました。上記の１・３は処理的にこちらで宜しいでしょうか？２だけどうしても分かりません。力足らずで申し訳ありません。宜しければお教え下さい。宜しくお願い致します。

kei344

2017/09/28 11:00

> 1.グローバル変数「(function($) {」の前の行に「var 」をつけて宣言すると他のスクリプトからも多分読めるはず。 var mclick = []; (function($) {//以下略 > 2.add_marker関数でmarkerをreturnする仕様にする add_marker関数の最後で return marker; すれば良いです。（new_map関数と同じように書けばよいです）

Tokiyo

2017/09/28 11:57

迅速な返信、本当にありがとうございます！早速やってみたのですが、記述場所がおかしいのかもしれません・・・「３」の「mclick.push( add_marker( $(this), map ) );」ですが、「function new_map( $el )」にある「$markers.each(function()」に入れたのですが・・・こんな感じです。 $markers.each(function(){ // add_marker( $(this), map ); mclick.push( add_marker( $(this), map ) ); }); この場所で問題無いでしょうか? 何度も質問すいません！

kei344

2017/09/28 13:04

問題ないと思いますよ。

Tokiyo

2017/09/30 02:22 編集

返信遅くなりまして申し訳ありませんでした。昨日夜半に試してみました。なのですがマップ内の方はキッチリ反応するのですが、リストの方が反応しません・・・。私の方の記述がおかしいかと思います。今の状態を見て頂けないでしょうか？ phpの記述は変わっておりません。 JSの部分だけ記述させて頂きます。何度も申し訳ありません！（JSコード追記部分に追記）

kei344

2017/09/30 01:02

コメントエリアではマークダウンが使えないため、コードはここではなく質問文に追記してください。（決して元のコードを消さないでください）質問文に追記することで他の回答者の目にも触れやすくなります。また、「リストのほう」の記述がありませんが、根本的にその部分を勘違いされているようですね。元のコードが $el.find('.marker' ,'.marker_click');としてもリスト部分のクリックイベントを取得するようにはできていません。（むしろ「 ,'.marker_click'」をはずしたほうが良い）

Tokiyo

2017/09/30 02:35

ご指摘ありがとうございます。初めての質問投稿でしたのでルールが理解出来ておりませんでした。上記のご指摘部分は修正しました。ご指摘のそれ以前に「li」の様なリストにしていないのが良く無いのだと思いました。 jsもそれに対応しているような記述でも無いように思えました・・・。改めてリストにしてみて再度調整してみます。色々と申し訳ありませんでした。丁重にお答え頂き感謝致します。また改めてご質問致します。ありがとうございました！

行動規範の内容に同意します