Googlemapsapi - create markers filter

Question

I’m making a dynamic map, using the Google Maps API that uses markers to signal a list of predefined locations, such as:

 self.locations = [{
        name: 'Foxtrot',
        lat: 38.713905,
        lng: -9.1518868,
        type: 'Bar'
     }

It also has a Search field that allows you to filter by the name of the locations (filteredNav). I should also filter the markers, but I can’t. The recommendation I have is this::

Try writing console.log(self.location_array();. Because Location and Marker data modal is Separate, you’ll have to loop through self.location_array() to process and find which one to show, which one to Hide by Calling setVisible (or setMap) on the Marker Object.

// Create observable array
self.nav = ko.observableArray(self.locations);
// Create empty observable string
self.filter = ko.observable(''); 
// Show nav and filter
self.filteredNav = ko.computed(function() {

    var filter = self.filter().toLowerCase();

    if (!filter) {
        return self.nav();
    }
    return self.nav().filter(function(i) {
        // Check for proper casing or lowercase
        return i.name.toLowerCase().indexOf(filter) > -1 || i.name.indexOf(filter) > -1;
    });

    //problema neste loop! Não sei como o fazer
    for (var i = 0; i < location_array()[i].length; i++) {
    //??????
        location_array()[i].setVisible(true);
    }//?????


 }

note: implementation of observable array: vm.location_array()[i]

Link to the map How I make the loop?

Answer 1

If I understand, missing you filter the markers, you should save them in an array and then remove the ones that are not in the list.

var markers = []; var m = new google.maps.Marker({ position: {lat: latitude, lng: .longitude}, map: $scope.map, animation: google.maps.Animation.DROP }); markers.push(m)

So you can control their display by removing or adding when needed.