Q:

Google Maps Api - active class for Marker Categories

I have a Google Maps with a Menu to show/hide several Marker Categories. I am trying to pass all of the active list-items a class="active" but cant make it work.
I think it should work with the click function:
//toggle visibility of Marker Categories
function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
    } else {
      marker.setVisible(false);
    }
  }
}

Here is the fiddle: 
http://jsfiddle.net/vanith/upn9qms0/10/
every help is very much appreciated

A:

You need to pass 'this' along to javascript and use that.
I have made class=active by default since all options are selected.They get toggled on selection.
http://jsfiddle.net/icemanreddy/xLou9wx3/15/
HTML
<div class="filters">
  <ul>
    <li id="bar" onclick="toggleGroup('bar',this);" class="active"><img src="http://www.vanith.de/img/icon_bar.png" /> Bars</li>
    <li id="hotel" onclick="toggleGroup('hotel',this)"  class="active"><img src="http://www.vanith.de/img/icon_hotel.png" /> Hotel</li>
    <li id="restaurant" onclick="toggleGroup('restaurant',this)"  class="active"><img src="http://www.vanith.de/img/icon_restaurant.png" /> Restaurant</li>
    <li id="shopping" onclick="toggleGroup('shopping',this)"  class="active"><img src="http://www.vanith.de/img/icon_shopping.png" />Shopping</li>
    <li id="freizeit" onclick="toggleGroup('freizeit',this)"  class="active"><img src="http://www.vanith.de/img/icon_freizeit.png" />Freizeit & Wellness</li>
    <li id="kultur" onclick="toggleGroup('kultur',this)"  class="active"><img src="http://www.vanith.de/img/icon_kultur.png" /> Kunst & Kultur</li>
    <li class="map-print">Drucken</li>
  </ul>
</div>
<div id="map" style="width: 100%; height: 400px"></div>

JS
 //toggle visibility of Marker Categories
function toggleGroup(type,elem) {
    for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
      elem.classList.add('active');
    } else {
      marker.setVisible(false);
      elem.classList.remove('active');
    }
  }
}

