Google Mapのチェックボックスと高度なカスタムフィールドのマーカー

Question

WordPressでGoogleマップマーカーを追加するには、高度なカスタムフィールドを使用しています。私はマーカーを分類する一連のフィルターを持っています。私の目標は、チェックされたフィルタの地図マーカのみを表示することです。スタックオーバーフローに関するいくつかの例が見つかりましたが、これらの例のほとんどはjsonデータまたは静的配列を使用しています。私のJSのスキルは、私が自分の状況に翻訳できるレベルではありません。ここで

は、マップ上になり、フィルタのためのHTMLです：ここで

<article class="map-filters"> 
    <div class="map-filters__inner"> 
     <ul class="map-filters__wrap"> 
      <li><label for="category1"><input type="checkbox" name="filter" value="category1" id="category1" checked>Category 1</label></li> 
      <li><label for="category2"><input type="checkbox" name="filter" value="category2" id="category2" checked>Category 2</label></li> 
      <li><label for="category3"><input type="checkbox" name="filter" value="category3" id="category3" checked>Category 3</label></li> 
     </ul> 
    </div> 
</article> 

は、マップ自体のHTMLです。繰り返しますが、私は動的にマップマーカーを追加するには、ACFリピータフィールドを使用していますが、私はこの例の目的のために静的なHTMLを提供しています：

<article id="js-community-map" class="community-map"> 
    <div class="marker" data-category="category1" data-icon="category1.png" data-lat="35.9491598" data-lng="-115.1354093">Marker Content</div> 
    <div class="marker" data-category="category2" data-icon="category2.png" data-lat="35.9320515" data-lng="-115.1236344">Marker Content</div> 
    <div class="marker" data-category="category3" data-icon="category2.png" data-lat="35.9327263" data-lng="-115.1246636">Marker Content</div> 
</article> 

を最後に、JSです。高度なカスタムフィールドを使用しているため、一般的なGoogleマップJSとは少し異なりますが、非常に似ているはずです。私が抱えている問題は、このコード内でフィルタリング機能をどこに追加するかわからないということです。私のフィルタリングコードが間違っている可能性もあります。私はnew_map関数を含むいくつかの場所でフィルタリングを追加しようとしましたが、何も動作していないようです。誰かが私にこれを手伝ってもらえると大変感謝しています。

(function($) { 

    // New Map 
    // This function will render a Google Map onto the selected jQuery element 
    function new_map($el) { 

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

     // args 
     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 
    function add_marker($marker, map) { 

     // vars 
     var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 
     var category = $marker.data('category'); // Get category name from data 

     // create marker 
     var marker = new google.maps.Marker({ 
      position : latlng, 
      map   : map, 
      category : category, // store category as property of marker 
      icon  : iconUrl.image + $marker.attr('data-icon') // Custom icon from data attribute 
     }); 

     // 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() { 
       map.panTo(this.getPosition()); 
       map.setZoom(15); 
       infowindow.open(map, marker); 
      }); 
     } 
    } 

    // Center Map 
    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  
    // global var 
    var map = null; 
    $(document).ready(function(){ 
     $('#js-community-map').each(function(){ 

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

     }); 
    }); 
})(jQuery); 

ここでは、私が使用しようとしているフィルタリング機能を紹介します。このコードを変更する必要がある場合はお知らせください。また、これをJSの上に置くのを助けることができれば、とても役に立ちます。

$(document).on('click', '.map-filters__wrap label', function(){ 
    $.each(map.markers, function(i, marker) { 
     if(marker.category == category) { 
      marker.visible = true; 
     } else { 
      marker.visible = false; 
     } 
    }); 
}); 

Answer 1

ACF Googleマップでフィルタリングする必要がある人は、私自身でこれを理解することができました。ここで

は、フィルタの作業と更新JSである：例えば

(function($) { 

    // New Map 
    // This function will render a Google Map onto the selected jQuery element 
    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); 
     }); 

     // Filter Markers 
     $('.map-filters__wrap').on('change', 'input[type="checkbox"]', function ({ 
      filter = $(this); 
      filterValue = filter.val(); 
      if(filter.is(':checked')) { 
       map.markers.forEach(function(element) { 
        if(element.category == filterValue) { 
         element.setVisible(true); 
        } 
       }); 
      } else { 
       map.markers.forEach(function(element) { 
        if(element.category == filterValue) { 
         element.setVisible(false); 
        } 
       }); 
      } 
     }); 

     // center map 
     center_map(map); 

     // return 
     return map; 
    } 


    // Add Marker 
    function add_marker($marker, map) { 
     // var 
     var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 
     var category = $marker.data('category'); // Get category name from data 

     // create marker 
     var marker = new google.maps.Marker({ 
      position : latlng, 
      draggable : true, // set marker to draggable to hide duplicates 
      crossOnDrag : false, // hide cross icon on drag event 
      map   : map, 
      category : category, // store category as property of marker 
      icon  : iconUrl.image + $marker.attr('data-icon') // Custom icon from data attribute 
     }); 

     // 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 
    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 
    // global var 
    var map = null; 
    $(document).ready(function(){ 
     $('#js-community-map').each(function(){ 
      // create map 
      map = new_map($(this)); 
     }); 
    }); 
})(jQuery); 

Answer 2

おかげで、私はそれに新しいですし、それは非常に有用でした！

他のいくつかの初心者のビット混乱を作ることができるだけの小さな観察は、本当に小さな構文エラーがここにあります：

フィルターマーカー

$('.map-filters__wrap').on('change', 'input[type="checkbox"]', function ({ 

が不足している)それは、あります

フィルタマーカー

$('.map-filters__wrap').on('change', 'input[type="checkbox"]', function() {