google maps - Set marker visible with knockout JS ko.utils.arrayFilter

Question

Hello guys I am trying to create an app that sets the appropriate markers visible when a knockout search is being done.

Basically the app is. When someone does a search the list that is bellow it, filters the list and makes only the markers that are associated with the filter list visible on the map. I have created a ko.utils.arrayFilter and I am trying to set only the item.marker.setVisible(true)

My Github link is https://github.com/Aimpotis/map3

Thank you again and much respect to the community it is helping me learn a lot

Answer 1

All you need is to set the visibility of the marker to match whether it is found:

if (!filter) {
  // this is new
  ko.utils.arrayForEach(self.listLoc(), function (item) {
    item.marker.setVisible(true);
  });
  return self.listLoc();
} else {
  return ko.utils.arrayFilter(self.listLoc(), function(item) {
    var result = (item.title.toLowerCase().search(filter) >= 0)
    item.marker.setVisible(result); // this is a new line
    return result;
  });
}

Working fiddle.

Note: unless you're supporting particularly old browsers, you can use the Array filter method rather than Knockout's arrayFilter util, and .foreach instead of arrayForEach.