Toggle google map Markers ON/OFF

Question

im looking to setup my map with toggle markers, so that when a user checks/unchecks a series of checkbox's under the map, whichever checkbox's are checked are the category of markers that are shown, so if 3 out of 4 checkbox's are checked ie: bar, school, resturaunt, those are the markers by category that are shown, and if someone unchecks that 4th marker or any number of them, they will become invisible"in sense", which isnt working, ive looked all over and couldnt find any references that help. im new to javascript and am proficient in PHP. i set up the locations[] array to be a 4 column out and infinite down. so for me to get the "place type" its locations[i][4]... ive been at this for days and i cant get any better. ive tried all possible combinations i can think of. like i said . im a php scripter. ANY help is much appriciated

<script type="text/javascript">
//PHP - Lat,Lng ARRAY
var locations = [
<?php
$x = 0; $i = 0; $j = 0; $y = 0; $z = 0; $a = 0; $b = 0; $c = 0;
for($aa = 0; $aa < $count; $aa++) {
$content = '<div class="coupon"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>'.$deal[$y].'</h1></strong><div class="ribbon-stitches-bottom"></div></div><div class="picture_coupon"><img src="'.$deal_photo[$b].'" width="150" height="100" /></div><div class="deal"><center><h1>'.$deal[$y].'</h1>'.$deal_info[$a].'<b>Expires: '.$deal_expiration[$c].'</b></center></div></div>';

echo "['" . $business_name[$x] . "'," . $lat[$i] . "," . $lng[$j] . "," . "'$content'" . ",".$type[$id]. "],";
$x++; $i++; $j++; $id++; $y++; $z++; $a++; $b++; $c++;
}
?>
['' , , ,'' , '']
];  
//PHP - Lat,Lng ARRAY 
  var map;

  function initialize() {
    var myOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

    // Try HTML5 geolocation
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

// INVERSE CODE PHP DYNAMIC

var infowindow = new google.maps.InfoWindow();

var marker, i;


//Marker Icon Generation.. Will be changed WHEN make new colors
var blue = '../images/map-icons/blue.png';

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: blue // iconType[$num] 
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][3]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

// INVERSE CODE PHP DYNAMIC // GEO LOCATION SET CENTER AND ERROR HANDLING

        map.setCenter(pos);
      }, function() {
        handleNoGeolocation(true);
      });
    } else {
      // Browser doesn't support Geolocation
      handleNoGeolocation(false);
    }
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
      var content = 'Error: The Geolocation service failed.';
    } else {
      var content = 'Error: Your browser doesn\'t support geolocation.';
    }   

// GEO LOCATION SET CENTER AND ERROR HANDLING

  }

  google.maps.event.addDomListener(window, 'load', initialize);

//=================ATTEMPT AT toggle Marker Checkbox

// == shows all markers of a particular category, and ensures the checkbox is checked ==

  function show(category) {

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

      if (locations[i].mycategory == category) {

        locations[i].setVisible(true);

      }

    }

    // == check the checkbox ==

    document.getElementById(category+"box").checked = true;

  }



  // == hides all markers of a particular category, and ensures the checkbox is cleared ==

  function hide(category) {

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

      if (locations[i].mycategory == category) {

        locations[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);

    }

    // == rebuild the side bar

    makeSidebar();

  }  
 /*HTML*/<input type ="checkbox" name="resturauntbox" onclick="boxclick(this,'resturaunt')"><label></label>
     <input type ="checkbox" name="barbox" onclick="boxclick(this,'bar')"><label></label>

//============================================CHECKBOX //HTML

Answer 1

I just set up a php for loop with a variable to catch all of the categories and one to turn them on and the other to hide them.

function checkAll(field)
{
for (j = 0; j < field.length; j++) {
    field[j].checked = true;

}

    for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(true);
                    } 
                }
            }}
function uncheckAll(field)
{

for (j = 0; j < field.length; j++) {
    field[j].checked = false;

}

    for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="American";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Asian";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Deli - Cafe";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Ethnic";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Italian";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Mexican";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Seafood";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }for(var thisisgay =0; thisisgay < 1; thisisgay++) {category ="Sushi";
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][4]) {
                        markers[i].setVisible(false);
                    } 
                }
            }      

}

Answer 2

No offense, but this is a very confusing question. However, just going off the title, it seems you want to add and remove markers. To add markers, you can use the following:

var marker = new google.maps.Marker({
    position: map.getCenter(), // center marker in map
    map: map,
    shadow: shadow, // MarkerImage type
    icon: image // MarkerImage type
});

Then, when you want to remove the marker from the map, you can use this:

marker.setMap(null);

Therefore, you can create a function to toggle markers on and off like this:

function toggleMarker(marker, map) {
    if (marker.getMap() == null)
        marker.setMap(map); // marker isn't visible on map, so make it visible
    else
        marker.setMap(null); // marker is visible on map, so make it invisible
}

If this isn't what you want, I'm sorry. I found it hard to understand your question.