hide/show markers using the google map api

[svgmx5]

I have this website that when loaded it displays markers based on the users location or based on what the category the user selected.  What i want to do is have a function or a way for the user to be able to show and hide the rest of the markers.

 

So if a user is looking for points in say New York City the user will navigate through the site to get to new york and display all the markers in new York. But i also want them to have the option to display all the markers that are on the database, not only in NYC

 

Similar to this: http://www.geocodezip.com/v3_MW_example_categories.html

 

While i understand the function and most of the code..i'm having a hard time implementing this to mine. The code he uses under the initialize() function is very similar to mine since all the points reside in an xml file.

 

Anyways i'm hoping someone here can help me understand how i can implement this.

 

Here's my code that i'm currently using...i'm hoping someone here can help me understand how to implement this using this code i have

 

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(geoplugin_latitude(), geoplugin_longitude()),
        zoom: 2,
        mapTypeId: 'terrain',
	zoomControlOptions:{
		style: google.maps.ZoomControlStyle.LARGE	
	}
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("name of file", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b>";
          var marker = new google.maps.Marker({
            map: map,
            position: point
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}