Filtering using jQuery Ui Map

Question

I was using older version of jQuery UI Map.So at that time Filtering was working perfectly.Below code I was using for older version:

$('#map_canvas').gmap({ 'center':new google.maps.LatLng(43.730531,-79.416927), 'callback': function() {

            $.getJSON( 'path to json', 'category=activity', function(data) { 

                $.each( data.markers, function(i, m) {

                    $('#map_canvas').gmap('addMarker', { 'tag': m.area, 'position': new google.maps.LatLng(m.latitude, m.longitude), 'center': new google.maps.LatLng(m.latitude, m.longitude), 'bounds': true } )

                    .click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': m.content }, this); });


                });
            });

            $("#some").change(function() {
                                    var bounds = new google.maps.LatLngBounds();
                                    var tag = $(this).val();
                                    if ( tag == '*' ) {
                                        $('#map_canvas').gmap('findMarker', 'tag', tag, function(found, marker) {
                                            marker.setVisible(true); 
                                            bounds.extend(marker.position);
                                            marker.map.fitBounds(bounds);   
                                        });
                                    } else {
                                        $('#map_canvas').gmap('findMarker', 'tag', tag, function(found, marker) {
                                            if (found) {
                                                marker.setVisible(true); 
                                                bounds.extend(marker.position);
                                                marker.map.fitBounds(bounds);
                                            } else { 
                                                marker.setVisible(false); 
                                            }
                                        });
                                    }
                                    $('#map_canvas').gmap('option', 'center', bounds.getCenter());
                                });
        }

But as I switched to the new version, I am not able to do filtering.Below code I am using for filtering for new version:

 $('#map_canvas').gmap({ 'center':new google.maps.LatLng(43.730531,-79.416927), 'callback': function() {

$.getJSON( 'path to json', 'category=activity', function(data) { 

    $.each( data.markers, function(i, m) {

        $('#map_canvas').gmap('addMarker', { 'tag': m.area, 'position': new google.maps.LatLng(m.latitude, m.longitude), 'center': new google.maps.LatLng(m.latitude, m.longitude), 'bounds': true } )

        .click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': m.content }, this); });


    });
});

$("#some").change(function() {
                        var bounds = new google.maps.LatLngBounds();
                        var tag = $(this).val();
                        if ( tag == '*' ) {
                            $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) {
                                marker.setVisible(true); 
                                bounds.extend(marker.position);
                                marker.map.fitBounds(bounds);   
                            });
                        } else { 
                            $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) {
                                if (isFound) {
                marker.setVisible(true); 
                                    bounds.extend(marker.position);
                                    marker.map.fitBounds(bounds); 
                                } else {  
                                    marker.setVisible(false);
                                }
                            });
                        }
                        $('#map_canvas').gmap('option', 'center', bounds.getCenter());
                    });

}

});

Above code is working for All markers(whose tag value is *).But for other property, its not working.When I tried to debug it, I found that it is not going in if(isFound) part.But there is tag.So it should go.

You can find its documentation here.

Answer 1

The documentation seems to be incorrect/not up to date.

The property(tag in this case) must be an array, otherwise the filtering will always fail.

replace in the marker-creation this:

'tag': m.area

with

'tag': [m.area]