How to remove markers from google maps v3?

Question

I am building a site which shows local places to get lunch. The site uses checkboxes to hide and show content:-

<li>Sandwich: <input type="checkbox" checked="checked" id="sandwichbox" onclick="boxclick(this,'sandwich')" /></li>
<li>Salad: <input type="checkbox" id="saladbox" onclick="boxclick(this,'salad')" /></li>
<li>Pasta: <input type="checkbox" id="pastabox" onclick="boxclick(this,'pasta')" /></li>

These are working fine, but I am using a switch statement to remove the markers.

function hide(category) {
switch(category) {
    case "sandwich":
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].sandwich == 1) {
          gmarkers[i].setVisible(false);
        }
      }
      break;
    case "salad":
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].salad == 1) {
          gmarkers[i].setVisible(false);
        }
      }
      break;
    case "pasta":
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].pasta == 1) {
          gmarkers[i].setVisible(false);
        }
      }
      break;
}
}

I am doing this because the shops can sell multiple things, (sandwiches and salad) for example, so each outlet cannot have a single category. So within my XML, there are nodes for each individual product :-

<markers>
    <marker name="Earl of Sandwich" address="40 Ludgate Hill" tel="020 7236 2846" website="www.earlofsandwich.co.uk" lat="51.514072" lng="-0.101638" sandwich="1" salad="1" pasta="" oriental="" curry="" mexican="" jacket="" soup="1" sushi="" roast="" wraps="1" falafel=""/>
    <marker name="Chao! Now" address="4 St Andrews Hill" tel="02036320368" website="www.chaonow.co.uk" lat="51.513008" lng="-0.101322" sandwich="1" salad="" pasta="" oriental="1" curry="" mexican="" jacket="" soup="1" sushi="" roast="" wraps="" falafel=""/>
</markers>

What I would like to do is remove the switch statement and replace it with something like this, passing the category value into the for loop, but I can't seem to gte it to work:-

function hide(category) {
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].category == 1) {
          gmarkers[i].setVisible(false);
        }
      }
}

I have tried the following:-

function hide(category) {
    var mymarker = "gmarkers[i]." + category;
      for (var i=0; i<gmarkers.length; i++) {
        if (mymarker == 1) {
          gmarkers[i].setVisible(false);
        }
      }
}

But this is just passing mymarker in as a variable, and i is not assigned a value.

Any help is much appreciated, or if I am going down the wrong path and should be using a different format for my data, please point it out. The other way I was considering was adding the values to an array and looping through that array, however, I only have a 1 or null value, and could not get a 2 dimensional array working using the category variable again.

Thanks in advance, if you need any more info please let me know.

Answer 1

I believe you want to access a object property using a variable. Use bracket notation instead of dot notation. Say there is a object "person"

var person = {name: "someone", age: 23};

You can access the 'name' property like

var name = person["name"]

You can also use bracket notation when the property name contains characters that would be either a syntax error or a keyword/reserved word. For example:

person["first name"] = "Nicholas";

It also allow variable name inside the the braces.

person[propertyName] = "some value"; //propertyName is a variable

So in you case it should be

function hide(category) {
    var mymarker = gmarkers[i][category];
      for (var i=0; i<gmarkers.length; i++) {
        if (mymarker == 1) {
          gmarkers[i].setVisible(false);
        }
      }
}

Hope this helps :)

Answer 2

If the category is a property of the marker, this should work:

function hide(category) {
   for (var i=0; i<gmarkers.length; i++) {
     if (gmarkers[i][category] == 1) {
        gmarkers[i].setVisible(false);
     }
   }
}