https://stackoverflow.com/questions/47056809/passing-filtered-list-to-visible-markers#

by jlspake

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="wrapper">
  <nav id="sidebar">
    <div class="sidebar-header">
      <h1>Old Stomping Grounds</h1>
    </div>
    <button data-bind="click: showPins">Show Pins</button>
    <button data-bind="click: hidePins">Hide Pins</button>
    <ul class="list-unstyled components">
      <h1>Filter List</h1>
      <div class="filter">
        <li>
          <input type="radio" name="type" checked value="All" data-bind="checked: selectedType" />All</li>
        <li>
          <input type="radio" name="type" value="Food" data-bind="checked: selectedType" />Food </li>
        <li>
          <input type="radio" name="type" value="Entertainment" data-bind="checked: selectedType" />Entertainment</li>
        <li>
          <input type="radio" name="type" value="Body Art" data-bind="checked: selectedType" />Body Art</li>
        <ul class="myLocations-list" data-bind="foreach: filteredmyLocations">
          <li data-bind="text: name, click: $parent.setPin"></li>
        </ul>
      </div>
      <hr>
      <input data_bind="textInput: filter" id="zoomtotext" placeholder="Search Philadelphia">
      <button data-bind="click: zoomToArea">Zoom</button>
      <hr>
      <li class="wiki-container" data-bind="with: currentPin, marker"></li>
      <h4 id="wiki-header">Wiki info for:</h4>
      <ul id="wiki-links"></ul>
    </ul>
  </nav>
  <div id="content">
    <div id="map"></div>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" id="sidebarCollapse" class="navbar-btn">
            <i class="glyphicon glyphicon-align-left"></i>
          </button>
        </div>
        <div class="collapse...

CSS

#map {
  height: 400px;
  width: 100%;
}

JavaScript

var map;
var infoWindow;
var markers = [];
var placeMarkers = [];

//locations list-would normally be in database
var myLocations = [{
  name: "Jim's Steaks",
  type: "Food",
  latlngLoc: {
    lat: 39.941557,
    lng: -75.149310
  }
}, {
  name: "Theater of the Living Arts",
  type: "Entertainment",
  latlngLoc: {
    lat: 39.941461,
    lng: -75.148745
  }
}, {
  name: "Inferno Body Piercing",
  type: "Body Art",
  latlngLoc: {
    lat: 39.941932,
    lng: -75.152870
  }
}, {
  name: "South Street Diner",
  type: "Food",
  latlngLoc: {
    lat: 39.940978,
    lng: -75.145252
  }
}, {
  name: "Philadelphia's Magic Gardens",
  type: "Entertainment",
  latlngLoc: {
    lat: 39.942642,
    lng: -75.159285
  }
}];

// create styles array
function initMap() {

  //create new map
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 39.941557,
      lng: -75.149310
    },
    zoom: 20,
    //styles: styles,
    mapTypeControl: false
  });
  //makes list clickable & ties together with markers
  var Pin = function(data) {
    this.name = ko.observable(data.name);
    this.type = ko.observable(data.type);
    this.latlngLoc = ko.observable(data.latlngLoc);
  };

  var ViewModel = function() {
    var self = this;
    this.showPins = showPins;
    this.hidePins = hidePins;
    this.zoomToArea = zoomToArea;
    this.pinList = ko.observableArray([]);

    myLocations.forEach(function(pinItem) {
      self.pinList.push(new Pin(pinItem));
    });

    this.currentPin = ko.observable(this.pinList()[0]);

    self.myLocations = myLocations;
    self.selectedType = ko.observable("All");
    this.filteredmyLocations = ko.computed(function() {
      var type = self.selectedType();
      var pins = self.pinList();
      if (type !== "All") {
        pins = pins.filter(function(myLocation) {
          return myLocation.type() === type;
        });
      }
      makeMarkers(pins);
    });
    this.setPin = function(clickedPin, marker) {
     ...