How to filter Google Maps markers in one array with select?

Question

I have a google maps implemented in my site with one array, like so:

var gmarkers1 = [];
var markers1 = [];

markers1 = [
[\'0\', \'Title\', 52.4357808, 4.9913156         


        

Answer 1

Building on top of @Rene Korss' solution, here is filter with multiple selection, based on checkboxes, but can easily be made to be multiple select list - just get array with the names of the options to compare with.

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});
// Our markers
markers1 = [
  ['0', 'Title 1', 52.4357808, 4.991315699999973, ['car', 'second']],
  ['1', 'Title 2', 52.4357808, 4.981315699999973, ['third']],
  ['2', 'Title 3', 52.4555687, 5.039231599999994, ['car', 'third']],
  ['3', 'Title 4', 52.4555687, 5.029231599999994, ['second']]
];
markerCount = markers1.length
// Function to init map
function initialize() {
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
  var mapOptions = {
    zoom: 12,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < markerCount; i++) {
    addMarker(markers1[i]);
  }
}
// Function to add marker to map
function addMarker(marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map
  });

  gmarkers1.push(marker1);

  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      map.panTo(this.getPosition());
      map.setZoom(15);
    }
  })(marker1, content));
}
// Function on Change of checkbox
updateView = function(element) {
  if (element) {
    //Get array with names of the checked boxes
    checkedBoxes = ([...document.querySelectorAll('input[type=checkbox]:checked')]).map(function(o) {
      return o.id;
    });
    console.log(checkedBoxes);
    for (i = 0; i < markerCount; i++) {
      marker = gmarkers1[i];
      console.log(marker.category)
      //Filter to show any markets containing ALL of the selected options
      if (typeof marker.category == 'object' && checkedBoxes.every(function(o) {
          return (marker.category).indexOf(o) >= 0;
        })) {
        marker.setVisible(true);
      } else {
        marker.setVisible(false);
      }
    }
  } else {
    console.log('No param given');
  }
}
// Init map
initialize();

#map-canvas {
  width: 500px;
  height: 500px;
}

   Car
   Second
   Third

Basically, you just get an array with the names of the selected checkboxes id's:

checkedBoxes = ([...document.querySelectorAll('input[type=checkbox]:checked')]).map(function(o) { return o.id; });

Then you compare each location category and show it if include all of the selected checkboxes but might have more unselected. If none are selected, all are shown:

if(typeof marker.category == 'object' && checkedBoxes.every(function (o) {return (marker.category).indexOf(o) >= 0;})){
      marker.setVisible(true);
}
else {
      marker.setVisible(false);
}

Here is also a JSfiddle

Update: as per the comment request here is code snippet which does not show anything unless you check something. Also the logic is that you need to have exactly the same categories selected as the marker in order to be visible.

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});
// Our markers
markers1 = [
  ['0', 'Title 1', 52.4357808, 4.991315699999973, ['car', 'second']],
  ['1', 'Title 2', 52.4357808, 4.981315699999973, ['third']],
  ['2', 'Title 3', 52.4555687, 5.039231599999994, ['third', 'car']],
  ['3', 'Title 4', 52.4555687, 5.029231599999994, ['second']]
];
markerCount = markers1.length
// Function to init map
function initialize() {
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
  var mapOptions = {
    zoom: 12,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < markerCount; i++) {
    addMarker(markers1[i]);
  }
}
// Function to add marker to map
function addMarker(marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map
  });

  gmarkers1.push(marker1);

  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      map.panTo(this.getPosition());
      map.setZoom(15);
    }
  })(marker1, content));
}
// Function on Change of checkbox
updateView = function(element) {
  if (element) {
    //Get array with names of the checked boxes
    checkedBoxes = ([...document.querySelectorAll('input[type=checkbox]:checked')]).map(function(o) {
      return o.id;
    });
    console.log(checkedBoxes);
    for (i = 0; i < markerCount; i++) {
      marker = gmarkers1[i];
      console.log(marker.category)
      //Filter to show any markets containing ALL of the selected options
      if(typeof marker.category == 'object' && marker.category.length === checkedBoxes.length && checkedBoxes.reduce((a, b) => a && marker.category.includes(b), true)){
        marker.setVisible(true);
      } else {
        marker.setVisible(false);
      }
    }
  } else {
    console.log('No param given');
  }
}
// Init map
initialize();

#map-canvas {
  width: 500px;
  height: 500px;
}

   Car
   Second
   Third

And the JSfiddle