Hi,

I have a dropdown and checkboxes.
These are been used to control the markers on googlemaps.

The dropdown has a list of counties/states which when one is selected it zooms the map to that state and shows the markers for it.

The checkboxes are been used to hide/show the different markers by category, e.g theatre, golf, info.

The problem is I can't figure out how to get them to work together.

When the page loads, all should be ticked and and the dropdown set to 'Select a county'. This should then be displaying all markers.

If the user then unticks a category, then only the categories ticked should show on the map.

If the user selects a state then only the markers for that state should show depending on the categories selected.

Can anyone please help with this.


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="js/mootools-core-1.4.5-full-compat.js" type="text/javascript"></script>
    <title>Google Maps</title>
<style type="text/css">
html, body { height: 100%; } 
#map_canvas {

    height: 380px;
    margin: 0;
    width: 420px;
}

</style>
<?php
$results= array ( "0"  => array ( "id" => "1",
                                  "name" => "Tourist Information 41",
				  "address" => "St. Annes Rd 1 West, Lytham St. Annes, Lancashire, FY8 1SA",
				  "county" => "Dublin",
				  "country" => Ireland,
				  "lat" => 53.330238,
				  "lng" => -6.264579,
				  "category" => theatre
                                     ),
                  "1" => array ( "id" => "2",
                                  "name" => "Tourist Information 42",
				  "address" => "St. Annes Rd 2 West, Lytham St. Annes, Lancashire, FY8 1SA",
				  "county" => "Dublin",
				  "country" => Ireland,
				  "lat" => 53.330238,
				  "lng" => -6.564579,
				  "category" => golf
                                     ),
                  "2" => array ( "id" => "3",
                                  "name" => "Tourist Information 43",
				  "address" => "St. Annes Rd 3 West, Lytham St. Annes, Lancashire, FY8 1SA",
				  "county" => "Clare",
				  "country" => Ireland,
				  "lat" => 52.730238,
				  "lng" => -9.264579,
				  "category" => info
                                     )
                );

?>

    <script type="text/javascript">

 
      var gmarkers = [];
      var gicons = [];
      var map = null;
      var icon = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
      var shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });



      // A function to create the marker and set up the event window
function createMarker(latlng,name,html,county,category) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        icon: icon,
        shadow: shadow,
        map: map,
        title: name,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
        // === Store the county and name info as a marker properties ===
        marker.mycounty = county;
	marker.mycategory = category;                                 
        marker.myname = name;
        gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

      // == shows all markers of a particular county, and ensures the checkbox is checked ==
      function show(county, category) {
        for (var i=0; i<gmarkers.length; i++) {
          if ((gmarkers[i].mycounty == county) || (gmarkers[i].mycategory == category)) {
            gmarkers[i].setVisible(true);
          }
        }
        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // == hides all markers of a particular county, and ensures the checkbox is cleared ==
      function hide(county, category) {
        for (var i=0; i<gmarkers.length; i++) {
          if ((gmarkers[i].mycounty == county) || (gmarkers[i].mycategory == category)) {
            gmarkers[i].setVisible(false);
          }
        }
        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show('', category);
        } else {
          hide('', category);
        }
      }

function reset() {
    document.getElementById("countyLocation").value = "Ireland";
    infowindow.close();
    zoom();
}

function search() {
 var selected = document.getElementById("countyLocation").value;

  if (selected == "Ireland") {

	$$('#countyLocation option').each(function(item) {
	    if(item.selected==false){
		show(item.innerHTML, '');
	    }
	});

  } else {

	$$('#countyLocation option').each(function(item) {
	    if(item.selected==false){
		hide(item.innerHTML, '');
	    }
	});

  }

}

function zoom() {
 var selected = document.getElementById("countyLocation").value;

  if (selected == "Ireland") {
        var Ireland = new google.maps.LatLng(53.527248, -8.327637);
        map.setCenter(Ireland);
        map.setZoom(6);
  }

  if (selected == "Cavan") {
        var Cavan = new google.maps.LatLng(54.072283, -7.388306);
        map.setCenter(Cavan);
        map.setZoom(8);
  }

  if (selected == "Clare") {
        var Clare = new google.maps.LatLng(52.988337, -9.102173);
        map.setCenter(Clare);
        map.setZoom(8);
  }

  if (selected == "Dublin") {
        var Dublin = new google.maps.LatLng(53.399707, -6.262207);
        map.setCenter(Dublin);
        map.setZoom(9);
  }



    show(selected);

}

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }


  function initialize() {
    var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(53.527248, -8.327637),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });



      // Read the data


        <?php $i=0; foreach($results as $result): ?>
	<?php if(trim($result['lat'])!='' && trim($result['lng'])!=''): ?>

          // obtain the attribues of each marker
          var lat = "<?php echo $result['lat']; ?>";
          var lng = "<?php echo $result['lng']; ?>";
          var point = new google.maps.LatLng(lat,lng);
          var address = "<?php echo $result['address']; ?>";
          var name = "<?php echo $result['name']; ?>";
          var html = "<b>"+name+"<\/b><p>"+address;
          var category = "<?php echo $result['category']; ?>";
	  var county = "<?php echo $result['county']; ?>";
          // create the marker
          var marker = createMarker(point,name,html,county,category);

	  <?php endif; ?>
	  <?php $i++; ?>
        <?php endforeach;?> 

        // == show or hide the categories initially ==
        show('', "theatre");
        show('', "golf");
        show('', "info");



    }

window.onload = initialize;

</script>

  </head>

<body class="page_bg">


<p> </p>
<div id="map_canvas" class="floatRight"> </div>
<div id="searchDrop">
<h3>Search</h3>
<select id="countyLocation" onchange="zoom();search();">
<option value="Ireland">Select a County</option>
<option value="Cavan">Cavan</option>
<option value="Clare">Clare</option>
<option value="Dublin">Dublin</option>
</select><br /><br />

    <form action="#">
      Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /><br />
      Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /><br />
      Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br /><br />
    </form>  

 <input onclick="reset();" type="submit" value="Reset" />

</div>

<p> </p>

  </body>

</html>