Googleマップのマーカー属性に基づいたフィルタリング

Question

私は既存のGoogleマップJSにフィルタ機能を追加しようとしていますが、どこから開始するのか本当にわかりません。以下のコードはすべての診療所をロードし、ボタンはmarker.specialties配列の項目と一致する必要があります。これを表示している間に他のすべての診療所を隠す簡単な機能を追加するにはどうすればよいですか？

function loadPlaces(map, lat = 37.78099539999999, lng = -122.47150820000002) { 
    var filters = { healthcare: false, denistry: false }; 
    // Filter trigger 
    $$("input[name=filter]").on("change", function() { 
     console.log("it runs"); 
     // let selectedFilter = this.id; 
     if (this.id === "healthcare" && filters.healthcare === false) { 
      filters.healthcare = true; 
     } else { 
      filters.healthcare = false; 
     } 

     // toggle 
     // filters.healthcare = true; 
     console.log(filters); 
     // 2. Check vars and filter by which ones are true 
     filterMarkers(filters); 
    }); 

    axios.get(`/api/clinics/near?lat=${lat}&lng=${lng}`).then(res => { 
     const places = res.data; 
     if (!places.length) { 
      alert("no places found!"); 
      return; 
     } 

     const bounds = new google.maps.LatLngBounds(); 
     const infoWindow = new google.maps.InfoWindow(); 

     const markers = places.map(place => { 
      const [placeLng, placeLat] = place.location.coordinates; 
      const position = { lat: placeLat, lng: placeLng }; 
      const marker = new google.maps.Marker({ 
       map, 
       position 
      }); 
      bounds.extend(position); 
      marker.place = place; 
      return marker; 
     }); 

     // when someone clicks ona a marker, show the details of that place 
     markers.forEach(marker => 
      marker.addListener("click", function() { 
       infoWindow.setContent(this.place.name); 
       console.log(this.place); 
       infoWindow.open(map, this); 
      }) 
     ); 

     // zoom map to fit markers perfectly 
     map.setCenter(bounds.getCenter()); 
     map.fitBounds(bounds); 
    }); 
} 

function makeMap(mapDiv) { 
    if (!mapDiv) return; 

    const map = new google.maps.Map(mapDiv, mapOptions); 
    loadPlaces(map); 

    const input = $("[name=geolocate]"); 
    const autocomplete = new google.maps.places.Autocomplete(input); 
} 

export default makeMap; 

Answer 1

あなたが表示したいすべてのバックsetMap(map)ものを非表示にするには、各マーカーのためsetMap(null)にする必要があります。

https://developers.google.com/maps/documentation/javascript/examples/marker-remove

Answer 2

ちょうどあなたが包み、あなたが再び

function showAllMarkers(markers, map) { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(map); 
    } 
} 

それをすべて表示する

function filter(markers) { 
    for (var i = 0; i < markers.length; i++) { 
     if(/* conditional statement to check whether you'll going to hide this marker */) { 
      markers[i].setMap(null); 
     } 
    } 
} 

を必要としないすべてのマーカーを隠します