Select Link or Checkbox to Display Category Markers

Question

I am somewhat stuck at trying to tell Javascript to do what I want it to do.

I have an example map http://calwestcultural.com/sgs/backup/example-map.html and I have cate

Answer 1

If you would like to keep markers in separate categories, create an array for each category of marker and use them to store each set of markers. Then do the following:

To hide markers on load, create the markers but leave the marker map property set to null:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
    position: myLatlng,
    map: null,
    title:"Hello World!"
});

To show only the markers in a given category, listen for the event that should trigger display of the markers and then set the markers' map property:

for ( var i = 0; i < markerCategoryArray.length; i++ ) {
    markerCategoryArray[i].setMap( map );
}

Answer 2

I got a clue on how to do this from this answer without multiple category arrays. More so, google maps v3 example linked there showed the following.

var gmarkers = [];
var marker = new google.maps.Marker({
    position: latlng,
    icon: gicons[category],
    shadow: iconShadow,
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
});
// === Store the category and name info as a marker properties ===
marker.mycategory = category;                                 
marker.myname = name;
gmarkers.push(marker);

Then just filter by the category on the marker as depicted in the exmaple.

// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
   for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[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<gmarkers.length; i++) {
      if (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();
}