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

You should add category as marker property.

markers1 = [
    ['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
    ['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
    ['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
    ['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
];

Create marker. Marker is object, so add category as property.

var category = markers1[i][4];
var pos = new google.maps.LatLng(markers1[i][2], markers1[i][3]);
marker1 = new google.maps.Marker({
    position: pos,
    map: map,
    category: category,
    icon: image1
});

And on select change, call function what checks if category is same as selected.

/**
 * Function to filter markers by category
 */

filterMarkers = function(category)
{
   for (i = 0; i < gmarkers1.length; i++) {
      marker = gmarkers1[i];

      // If is same category or category not picked
      if(marker.category == category || category.length == 0)
      {
          marker.setVisible(true);
      }
      // Categories don't match 
      else
      {          
          marker.setVisible(false);
      }
    }  
}

Working example

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});

// Our markers
markers1 = [
    ['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
    ['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
    ['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
    ['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
];

/**
 * 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 < markers1.length; 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 to filter markers by category
 */

filterMarkers = function (category) {
    for (i = 0; i < gmarkers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

// Init map
initialize();

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

<script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js"></script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">Please select category</option>
    <option value="second">second</option>
    <option value="car">car</option>
    <option value="third">third</option>
</select>

---

Filter by multiple categories on marker

EDIT for @Myoji comment

To use multiple categories on each marker, just add them as array and edit if condition on filterMarkers.

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']]
];

And filterMarkers would be

/**
 * Function to filter markers by category
 */

filterMarkers = function(category)
{
   for (i = 0; i < gmarkers1.length; i++) {
      marker = gmarkers1[i];

      // If is same category or category not picked
      if((typeof marker.category == 'object' && marker.category.indexOf(category) >= 0) || category.length == 0){
      {
          marker.setVisible(true);
      }
      // Categories don't match 
      else
      {          
          marker.setVisible(false);
      }
    }  
}

Working example

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']]
];

/**
 * 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 < markers1.length; 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 to filter markers by category
 */

filterMarkers = function (category) {
    for (i = 0; i < gmarkers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if((typeof marker.category == 'object' && marker.category.indexOf(category) >= 0) || category.length == 0){
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

// Init map
initialize();

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

<script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js"></script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">Please select category</option>
    <option value="second">second</option>
    <option value="car">car</option>
    <option value="third">third</option>
</select>

---

Fit bounds after filtering

EDIT for @bluantinoo comment

/**
 * Function to filter markers by category
 */

filterMarkers = function(category)
{
    var bounds = new google.maps.LatLngBounds();
    for (i = 0; i < gmarkers1.length; i++) {
        marker = gmarkers1[i];

        // If is same category or category not picked
        if(marker.category == category || category.length == 0)
        {
            marker.setVisible(true);
            bounds.extend(marker.getPosition());
        }
        // Categories don't match 
        else
        {          
            marker.setVisible(false);
        }
        map.fitBounds(bounds);
    }  
}

Working example

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});

// Our markers
markers1 = [
    ['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
    ['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
    ['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
    ['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
];

/**
 * 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 < markers1.length; 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 to filter markers by category
 */

filterMarkers = function(category)
{
    var bounds = new google.maps.LatLngBounds();
    for (i = 0; i < gmarkers1.length; i++) {
        marker = gmarkers1[i];

        // If is same category or category not picked
        if(marker.category == category || category.length == 0)
        {
            marker.setVisible(true);
            bounds.extend(marker.getPosition());
        }
        // Categories don't match 
        else
        {          
            marker.setVisible(false);
        }
        map.fitBounds(bounds);
    }  
}

// Init map
initialize();

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

<script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js"></script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">Please select category</option>
    <option value="second">second</option>
    <option value="car">car</option>
    <option value="third">third</option>
</select>

Answer 2

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;
}

<script src="https://maps.googleapis.com/maps/api/js?key=&v=3&language=ee&dummy=dummy.js"></script>
<div id="map-canvas"></div>
<div id="options">
  <input type="checkbox" id="car" onchange="updateView(this);" /> Car
  <input type="checkbox" id="second" onchange="updateView(this);" /> Second
  <input type="checkbox" id="third" onchange="updateView(this);" /> Third
</div>

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;
}

<script src="https://maps.googleapis.com/maps/api/js?key=&v=3&language=ee&dummy=dummy.js"></script>
<div id="map-canvas"></div>
<div id="options">
  <input type="checkbox" id="car" onchange="updateView(this);" /> Car
  <input type="checkbox" id="second" onchange="updateView(this);" /> Second
  <input type="checkbox" id="third" onchange="updateView(this);" /> Third
</div>

And the JSfiddle