Filter Google Maps API V3 by Tags

My goal is to allow the user to filter results based on the option they select at the top of the map. If anyone could help me clean up this code and make it functional I would greatly appreciate your efforts

This first part sets up the 4 options I would like to filter by.

<div id="Filters" style="margin:5px;background:#f4f4f4;border:1px solid #888;padding:5px 5px 5px 10px;">
<label style="color:#555;font-size:12px; font-weight:bold;" for="tags">Filter by: </label>
          <select id="tags" style="outline:none;"> 
              <option value="all">All</option>
              <option value="Western">Western</option> 
              <option value="Central">Central</option> 
              <option value="Eastern">Eastern</option> 
          </select>
     </div>




 (function() {

   // Creating an array that will contain hhs icons
      var hhsIcons = [];
      hhsIcons['Eastern'] = new google.maps.MarkerImage('{!$Resource.markerE}'    );
      hhsIcons['Western'] = new google.maps.MarkerImage('{!$Resource.markerW}'   );
      hhsIcons['Central'] = new google.maps.MarkerImage('{!$Resource.markerC}'   );

   window.onload = function() {

     // Create object literal containing the properties of the map
     var options = {  
       zoom:5,  
       center: new google.maps.LatLng(37.09, -95.71),  
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       mapTypeControl: false
     };

     // Create the map  
     var map = new google.maps.Map(document.getElementById('map'),
 options);

     var homeControlDiv = document.createElement('DIV');
     var homeControl = new HomeControl(homeControlDiv, map);
     homeControlDiv.index = 1;
     map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(homeControlDiv);

     var eastControlDiv = document.createElement('DIV');
     var eastControl = new EastOnly(eastControlDiv, map);
     eastControlDiv.index = 1;
     map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(eastControlDiv);


     var jsonData = {'jsonaccounts': 
     [
     <apex:repeat value="{!Accounts}" var="abc">
       {
         'lat': '{!abc.Latitude__c}',
         'lng': '{!abc.Longitude__c}',
         'hhs': '{!abc.HHS_Region__c}'
       },
     </apex:repeat>
     ]};


     var accountname = [];
     var director = [];
     var vp = [];
     var division = [];

     //Add field data for each account into respective arrays
     <apex:repeat value="{!Accounts}" var="acc">
     accountname.push("{!acc.name}");
     director.push("{!acc.hhs_director__r.name}");
     vp.push("{!acc.area_vp__r.name}");
     division.push("{!acc.HHS_Region__c}");
     </apex:repeat>


     // Create a variable that will hold the InfoWindow object
     var infowindow;


     var markers = [];


     // Loop through the jsondata
     for (var i = 0; i < jsonData.jsonaccounts.length; i++) {

     var jsonaccounts = jsonData.jsonaccounts[i];

       // Create marker data
       var myMarkerData = {         // collecting all custom data that you want to add
                 region : jsonaccounts.hhs,   // to the marker object within an array.
                 }   

When I add the markers, I think I need to make categories for each so it will let me filter by the specific category

// Adding the markers
       var marker = new google.maps.Marker({
         position: new google.maps.LatLng(jsonaccounts.lat,
 jsonaccounts.lng), 
         map: map,
         icon: hhsIcons[jsonaccounts.hhs],
         data: myMarkerData
       });
       marker.region = jsonaccounts.hhs;      
       markers.push(marker);      
       alert(markers[i].region);


       // Wrap the event listener inside an anonymous function 
       // that we immediately invoke and passes the variable i to.
       (function(i, marker) {

        // Create the event listener. It now has access to the values of
        // i and marker as they were during its creation
         google.maps.event.addListener(marker,
 'click', function() {

           if (!infowindow) {
          开发者_StackOverflow中文版   infowindow = new google.maps.InfoWindow();
           }

           // Set the content of the InfoWindow
           infowindow.setContent('<b>' + accountname[i] + '</b>' + 
                                 '<br/>Director: ' + director[i] + 
                                 '<br/>VP: ' + vp[i] + 
                                 '<br/>Division: ' + division[i] + 

           // Tie the InfoWindow to the marker 
           infowindow.open(map, marker);

         });

       })(i, marker);

     }
       }; })();

I am not sure if this code is useful, but it was where I left off

marker.region = region;
 markers.push(marker); function
 hide(region) {
         for (var i=0; i<map.markers.length; i++) {
           if (map. markers[i].region == region) {
             map.markers[i].setVisible(false);
           }
         }
</script>

In your last code block you use map.markers while it should be just markers.