Show/Hide Markers based on property jQuery-UI-Map (Google maps API V3)

Question

I have been developing a mapping program using jQuery-UI-Map plugin (http://code.google.com/p/jquery-ui-map/). I am having an issue that I have tried to solve in MANY different ways to no avail.

I have a drop down that onchange should filter the markers on the map.

Here is the snippet of the code that pertains to this issue. With this code when I choose a value from the drop down all the markers are removed.

   $('#map').gmap().bind('init', function (evt, map) {
    $.getJSON('controllers/markers.json', function (data) {
        $.each(data.markers, function (i, marker) {
            $('#map').gmap('addMarker', {
                'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                'icon': "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|" + marker.projectNumber + "|004162|FFFFFF|",
                'bounds': false,
                'statusSelect': marker.status
            })
        });
        $("#statusSelect").change(function () {
            $('#map').gmap('find', 'markers', {
                'property': 'statusSelect',
                'value': $(this).val()
            },

            function (marker, found) {
                if (found) {
                    $('#map').gmap('addBounds', marker.position);
                }
                marker.setVisible(found);
            });
        });
    });
});

Here is the JSON that I am using:

http://designsbymitch.com/markers.json

EDIT: here is the HTML for the status drop down -

<select id="statusSelect">
        <option value="Created">Created</option>
        <option value="Working">Working</option>
        <option value="Complete">Complete</option>
        <option value="Task">Task</option>
        <option value="Void">Void</option>
        <option value="delete">delete</option>
        <option value="Paid">Paid</option>
        <option value="Overdue">Overdue</option>
        <option value="Invoiced">Invoiced</option>
        <option value="Non-Billable Expense">Non-Billable Expense</option>
        <option value="Billable Expense">Billable Expense</option>
        <option value="Unpaid">Unpaid</option>
        <option value="new status mitch">new status mitch</option>
        <option value="new status mitch again">new status mitch again</option>
</select>

Answer 1

This is a common problem and possibly a bug in the UI, the property you're setting is number you should make it a string replace marker.status by ""+marker.status and the same thing in your find!

Answer 2

The problem seems to be that you're setting a custom property called statusSelect when you call addMarker, and then looking for a property called tags when you call find. Change property: 'tags' to property: 'statusSelect' and it should work.

You're also doing something rather strange when you bind your events - you're binding a new change event every time you create a marker, so if you have 100 markes you'll have 100 change event listeners, which will all fire in sequence and do the same thing. You should move $("#statusSelect").change(...) outside of your $.each function, so there's only one event handler being bound.

So, your code should read:

$('#map').gmap().bind('init', function (evt, map) {
    $.getJSON('controllers/markers.json', function (data) {
        $.each(data.markers, function (i, marker) {
            $('#map').gmap('addMarker', {
                'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                'icon': "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|" + marker.projectNumber + "|004162|FFFFFF|",
                'bounds': false,
                'statusSelect': marker.status
            })
        });
        $("#statusSelect").change(function () {
            $('#map').gmap('find', 'markers', {
                'property': 'statusSelect',
                'value': $(this).val()
            },

            function (marker, found) {
                if (found) {
                    $('#map').gmap('addBounds', marker.position);
                }
                marker.setVisible(found);
            });
        });
    });
});