ACFを使用してGoogleマップでWordpressの場所を切り替えます

Question

私は、Googleマップ上のすべての場所（カスタム投稿の種類）を示すページでウェブサイトを構築しています。私は、ACF（Advanced Custom Fields）を使って地図の場所を特定の場所に追加します。さらに、各場所にカテゴリ（駐車場、ホテル、その他）を与えます。

この時点で、すべての場所が地図上に正しく表示されます。しかし、私はそれらのカテゴリに基づいてこれらの場所を切り替える方法を見つけることを試みています。最初は地図上のすべてのマーカーを非表示にして、クリック（アンカーまたはチェックボックスは問題ではありません）に基づいて表示の切り替えを行います。

私は有望な答えを見ましたが、ACFが提供するコードではこれを理解できません。誰かが私にこれを手伝ってくれることを願っているsetvisibilityに余分なコードを追加する場所を教えて、これをカテゴリ選択に基づいて切り替えることができます。

コードACFにより提供を以下に示します。

<script type="text/javascript"> 
(function($) { 

/* 
* new_map 
* 
* This function will render a Google Map onto the selected jQuery element 
* 
* @type function 
* @date 8/11/2013 
* @since 4.3.0 
* 
* @param $el (jQuery element) 
* @return n/a 
*/ 

function new_map($el) { 

    // var 
    var $markers = $el.find('.marker'); 


    // vars 
    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; 

} 

/* 
* add_marker 
* 
* This function will add a marker to the selected Google Map 
* 
* @type function 
* @date 8/11/2013 
* @since 4.3.0 
* 
* @param $marker (jQuery element) 
* @param map (Google Map object) 
* @return n/a 
*/ 

function add_marker($marker, map) { 

    // var 
    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); 

     }); 
    } 

} 

/* 
* center_map 
* 
* This function will center the map, showing all markers attached to this map 
* 
* @type function 
* @date 8/11/2013 
* @since 4.3.0 
* 
* @param map (Google Map object) 
* @return n/a 
*/ 

function center_map(map) { 

    // vars 
    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); 
    } 

} 

/* 
* document ready 
* 
* This function will render each map when the document is ready (page has loaded) 
* 
* @type function 
* @date 8/11/2013 
* @since 5.0.0 
* 
* @param n/a 
* @return n/a 
*/ 
// global var 
var map = null; 

$(document).ready(function(){ 

    $('.acf-map').each(function(){ 

     // create map 
     map = new_map($(this)); 

    }); 

}); 

})(jQuery); 
</script> 

次のように私のマーカーをレンダリングするコードは次のとおりです。

<div class="acf-map"> 

    <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?> 

     <?php 
      $location = get_field('google_maps_adres'); 
      if(!empty($location)): 
     ?> 

     <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> 
      <h4 class="marker__title"><?php the_title(); ?></h4> 
      <div class="marker__address"> 
       <?php $contact_address = get_field('google_maps_adres');$address = explode("," , $contact_address['address']); ?> 
       <div class="marker__address-street"><?php echo $address[0].', ';?></div> 
       <div class="marker__address-city"><?php echo $address[1];?></div> 
      </div> 
      <a class="marker__link" href="<?php the_permalink();?>">Meer informatie</a> 
     </div> 

     <?php endif; ?> 

    <?php endwhile;?> 

    <?php wp_reset_postdata(); ?> 

    </div> 

Answer 1

私はこれを助けることができるが、多分それはすでにhereに答えています。見て、そこに提案されたソリューションを試してみてください。それはあなたが私を知っていると私たちは一緒に働くことができるために動作しない場合;）

EDIT：

[OK]を、let'sは、これを実行してみてください。まず、各マーカーをクラスまたはIDで区別する必要があります。カテゴリを使用しているのでクラスでやってみましょう。それぞれのマーカーはいくつかのカテゴリに属する​​ことができます。私がやったすべてのカテゴリを取得し、メインマーカーコンテナのクラスとしてそれらを使用し、各マーカーのためである

<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?> 

<?php $cats = get_the_category(); //this gives me the categories of the post (marker) ?> 
<?php $catsString = implode(", ",$cats); // this gives me the categories as a String separated with ", " ?> 

    <?php 
     $location = get_field('google_maps_adres'); 
     if(!empty($location)): 
    ?> 

    <div class="marker <?php echo $catsString; ?>" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> 
     <h4 class="marker__title"><?php the_title(); ?></h4> 
     <div class="marker__address"> 
      <?php $contact_address = get_field('google_maps_adres');$address = explode("," , $contact_address['address']); ?> 
      <div class="marker__address-street"><?php echo $address[0].', ';?></div> 
      <div class="marker__address-city"><?php echo $address[1];?></div> 
     </div> 
     <a class="marker__link" href="<?php the_permalink();?>">Meer informatie</a> 
    </div> 

    <?php endif; ?> 

<?php endwhile;?> 

を次のように

はあなたのコードを変更し

。

これで、すべてのマーカーのクラスが設定されました。それは良い。次のステップは、これらのマーカーの可視性を制御するために入力を使用することです。例えば、チェックボックスを使ってみましょう。各カテゴリについては

あなたは、チェックボックスを持っている必要があります。

<?php $categories = get_categories(); 
     foreach($categories as $category) { 
      echo '<label><input class="markerToggle" type="checkbox" id="'. $category->name .'">'. $category->name .'</label>'; 
     } 
?> 

その後、あなたは、各マーカー

$('.markerToggle').change(function() { 
    if($(this).is(":checked")) { 
     //'checked' event code 
     $('.marker.' + this.id).show(); 
     return; 
    } 
    $('.marker.' + this.id).hide(); 
    //'unchecked' event code 
});