Categories
CMS Mastering Development Wordpress

Google Maps filters – if statement will not return true – (map set up with ACF but more google maps related)

I have had a look through the other questions posted on here and none of the answers seem to work for me – I have set up a google map which pulls in the markers from ACF Location fields – this all works fine. I have 3 sets of filters with multiple checkboxes for Country, Region and Programme – the user can check as many as they want.

I have created this function to filter the markers :

$('#deliveryCentreForm').on('change', 'input[type="checkbox"]', function() {
    
var countrySearch = [];
$('.country-filter-set input[type="checkbox"]').each(function() {
  if($(this).is(':checked')) {
    countrySearch.push($(this).val());
  }
});
console.table(countrySearch);

for (i = 0; i < map.markers.length; i++) {
        var marker = map.markers[i];
        console.log(marker.country);
        if (countrySearch.indexOf(marker.country) >= 0) {
                marker.setVisible(true);
        }  else {
                marker.setVisible(false);
        }

    }


});

Console.table of countrySearch returns the array as expected and console.log of marker.country returns the correct information but if (countrySearch.indexOf(marker.country) >= 0) { does not return true for any markers even though the right data is being returned.

When checking a checkbox the map hides all the markers (I have tested that it works by changing the if statement to true to see if the markers stayed visible and they do)

Can anyone shed any light on this is it something specific to google maps?

Leave a Reply

Your email address will not be published. Required fields are marked *