Checkbox Filters on XML Generated Google Map

I am having a hard time trying to setup checkbox filters for the following code, which is reduced because the whole thing is massive. Everything works, except these checkbox filters. The markers are all being pulled from a php generated xml file like in Googles example.

I think it's because of the marker file being a object HTMLCollection and I'm getting markers[i].setVisible is not a function I've tried many things but it's beyond my knowledge. I'd really appreciate some help with this one, the last step for me.

Example XML data

<marker name="Some Shop" id="2" type="shops" description="Great shop" street_number="350" street_name="Main Road" suburb="Lovely ville" lat="-23.9544011" lng="156.1895873" from="2014-01-01 01:00:00" to="2015-10-01 01:00:00"/>

Javascript

downloadUrl("xml_generator.php", function (data) {

                var xml = data.responseXML;

                var markers = xml.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {

                    var type = markers[i].getAttribute("type");

                    var marker = new google.maps.Marker({
                        map: map,
                        position: point,
                        icon: icon.icon
                    });

                    bindInfoBox(marker, map, ib, myOptions);

                }

        $(document).ready(function(){
        // == shows all markers of a particular category, and ensures the checkbox is checked ==
        function show(category) {
            window.alert("Show " + category + markers);
            for (var i=0; i<markers.length; i++) {
                if (markers[i].getAttribute("type") == category) {
                    markers[i].setVisible(true);
                }
            }
        }

        // == hides all markers of a particular category, and ensures the checkbox is cleared ==
        function hide(category) {
            window.alert("Hide " + category);
            for (var i=0; i<markers.length; i++) {
                if (markers[i].getAttribute("type") == category) {
                    markers[i].setVisible(true);
                }
            }

        }

        $(".toggle").click(function(){
            var cat = $(this).attr("value");
            // If checked
            if ($(this).is(":checked"))
            {
                show(cat);
            } else
            {
                hide(cat);
            }
        });

    });

            });

Then the HTML checkbox

<input value="shops" class="toggle" type="checkbox" checked="yes">