Question

Updated Example:

http://jsfiddle.net/7Cwbn/62/

You can click on the markers

Hold Ctrl to select multiple options

UPDATE:

I’ve fiddled with the script some more and replaced jQuery.inArray() with array_diff() function as a test statement inside the ifs.

Also I’ve change the if logic a bit. I tried the new code with filtering just the houses and it seems to work, but when I enable the same filtering code for condos too – filtering gets messed up a little.

For example: If I select everything from Features – nothing shows up on the map. But some markers should have showed up since I have at least two of them that have all of the three available features.

$(markers.houses).each(function(index, elem) {
        if ((array_diff(selectedFeatures, elem.features).length === 0) && (array_diff(selectedNearby, elem.nearby).length === 0)) {
            if (!markers.houseMarkers[index].visible) {
                markers.houseMarkers[index].setVisible(true);
            }
        }
    });
$(markers.condos).each(function(index, elem) {
        if ((array_diff(selectedFeatures, elem.features).length === 0) && (array_diff(selectedNearby, elem.nearby).length === 0)) {
            if (!markers.condoMarkers[index].visible) {
                markers.condoMarkers[index].setVisible(true);
            }
        }
    });

FIG 1.1 – Slice of filtering code for houses and condos

Answer 1

You have a typo here (selectedFeaturess) which might have something to do with it:

 if (jQuery.inArray(selectedFeaturess[i], elem.features) !== -1 || jQuery.inArray(selectedFeatures[i], elem.features) > -1) {

Also this isn’t going to help I suspect:

<option value="Wendy's">Harveys</option>

Code like this:

if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1 || jQuery.inArray(selectedFeatures[i], elem.features) > -1) {

Can be simplified to just:

if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {

Because if it’s > -1 then it’s !== -1, so the 2nd clause is redundant. e.g. if you had it = 0, then the first part of the IF clause fires and no need for the 2nd part of the IF statement to be executed.

And finally, here’s a rewrite of your $(document).ready() function. The main problem was how you were looping over the elements in your arrays. Instead of treating them as jquery selectors and doing a .each() on them, you just need to do a simple For loop. But you can use the jquery selector to check their lengths. This works for me (I also renamed Wendy’s to Harveys in the options).

$(document).ready(function() {
    //$('#filter').on('click', function(e) {
    $('#filter').click(function(e) {
        // prevent refreshing of the page
        e.preventDefault();

        // close all infoWindows
        infowindow.close();

        // hide all markers
        $(markers.houses).each(function(index, elem) {
            markers.houseMarkers[index].setVisible(false);
        });
        $(markers.condos).each(function(index, elem) {
            markers.condoMarkers[index].setVisible(false);
        });

        // get the selected features from select box
        var selectedFeatures = $("#features").val();
        var selectedNearby = $("#nearby").val();

        // for each house element...
        $(markers.houses).each(function(index, elem) {
            //first filter by selected features
            if ($(selectedFeatures).length) {
                for (var i = 0; i < selectedFeatures.length; i++) {       
                    if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {    
                        if (!markers.houseMarkers[index].visible) {
                            markers.houseMarkers[index].setVisible(true);
                        }
                    }
                }
            }

            //then filter by nearby selections
            if ($(selectedNearby).length) {
                for (var i = 0; i < selectedNearby.length; i++) {
                    if (jQuery.inArray(selectedNearby[i], elem.nearby) !== -1) {
                        // if marker is not visible, but meets the filtering criteria - show it
                        // otherwise leave it as it is
                        if (!markers.houseMarkers[index].visible) {
                            markers.houseMarkers[index].setVisible(true);
                        }
                    }
                }
            }
        });

        // for each condo element...
        $(markers.condos).each(function(index, elem) {

            // first filter by selected features
            if ($(selectedFeatures).length) {
                 for (var i = 0; i < selectedFeatures.length; i++) {       
                    if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {
                        // if marker is not visible, but meets the filtering criteria - show it
                        // otherwise leave it as it is
                        if (!markers.condoMarkers[index].visible) {
                            markers.condoMarkers[index].setVisible(true);
                        }
                    }
                }
            }

            //then filter by nearby selections
            if ($(selectedNearby).length) {
                for (var i = 0; i < selectedNearby.length; i++) {
                    if (jQuery.inArray(selectedNearby[i], elem.nearby) !== -1) {
                        // if marker is not visible, but meets the filtering criteria - show it
                        // otherwise leave it as it is
                        if (!markers.condoMarkers[index].visible) {
                            markers.condoMarkers[index].setVisible(true);
                        }
                    }
                }
            }
        });
    });
});