質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • PHP

    19210questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    15314questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    6669questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • Google Map

    335questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 315

Tokiyo

score 1

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);
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/26 10:17

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

    キャンセル

  • 2017/09/28 19:50

    kei344様

    何度も質問申し訳ありません。
    JavaScriptに関して素人過ぎて・・・
    調べても上手くいきませんでした。

    1.グローバル変数を用意して空の配列を入れておく
    これは
    「mclick = [];」
    この様な記述で良いでしょうか?

    2.add_marker関数でmarkerをreturnする仕様にする
    こちらがググってもワードが引っかからずどうしても分かりませんでした。
    どの様に記述すれば宜しいでしょうか?

    3.$markers.eachの中で、グローバル変数.push( add_marker( $(this), map ) );とする
    こちらは「1」で指定した変数
    「mclick.push( add_marker( $(this), map ) );」
    と指定しました。

    上記の1・3は処理的にこちらで宜しいでしょうか?
    2だけどうしても分かりません。
    力足らずで申し訳ありません。
    宜しければお教え下さい。
    宜しくお願い致します。

    キャンセル

  • 2017/09/28 20:00

    > 1.グローバル変数
    「(function($) {」の前の行に「var 」をつけて宣言すると他のスクリプトからも多分読めるはず。
    var mclick = [];
    (function($) {//以下略

    > 2.add_marker関数でmarkerをreturnする仕様にする
    add_marker関数の最後で return marker; すれば良いです。(new_map関数と同じように書けばよいです)

    キャンセル

  • 2017/09/28 20:57

    迅速な返信、本当にありがとうございます!

    早速やってみたのですが、記述場所がおかしいのかもしれません・・・
    「3」の「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 ) );
    });

    この場所で問題無いでしょうか?
    何度も質問すいません!

    キャンセル

  • 2017/09/28 22:04

    問題ないと思いますよ。

    キャンセル

  • 2017/09/30 09:44 編集

    返信遅くなりまして申し訳ありませんでした。

    昨日夜半に試してみました。
    なのですがマップ内の方はキッチリ反応するのですが、リストの方が反応しません・・・。

    私の方の記述がおかしいかと思います。
    今の状態を見て頂けないでしょうか?
    phpの記述は変わっておりません。
    JSの部分だけ記述させて頂きます。

    何度も申し訳ありません!

    (JSコード追記部分に追記)

    キャンセル

  • 2017/09/30 10:02

    コメントエリアではマークダウンが使えないため、コードはここではなく質問文に追記してください。(決して元のコードを消さないでください)質問文に追記することで他の回答者の目にも触れやすくなります。

    また、「リストのほう」の記述がありませんが、根本的にその部分を勘違いされているようですね。
    元のコードが $el.find('.marker' ,'.marker_click');としてもリスト部分のクリックイベントを取得するようにはできていません。(むしろ「 ,'.marker_click'」をはずしたほうが良い)

    キャンセル

  • 2017/09/30 11:35

    ご指摘ありがとうございます。
    初めての質問投稿でしたのでルールが理解出来ておりませんでした。
    上記のご指摘部分は修正しました。

    ご指摘のそれ以前に「li」の様なリストにしていないのが良く無いのだと思いました。
    jsもそれに対応しているような記述でも無いように思えました・・・。
    改めてリストにしてみて再度調整してみます。

    色々と申し訳ありませんでした。
    丁重にお答え頂き感謝致します。

    また改めてご質問致します。
    ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    19210questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    15314questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    6669questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • Google Map

    335questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

  • トップ
  • PHPに関する質問
  • WordpressのAdvanced Custom Fields Repeater Fieldを使ったGoogleMapのマップ外リスト表示からマーカーを開く方法