Karte zeigt verschiedene Punkte je nachdem, was sichtbar ist

Question

Ich habe 90% von dem, was Ich mag würde:

https://jsfiddle.net/ruwez7tq/

Alles, was ich tun möchte, ist die gezeichneten Punkte zu ändern, die auf dem Liste abhängig dargestellt sind sichtbar . Im Moment sind nur die ersten Punkte der Liste ("Bars") zu sehen. Auch wenn dies die richtigen Seitenladepunkte sind, wenn Sie beispielsweise auf "Restaurants" klicken, sollten die nummerierten Punkte auf diese Orte aktualisiert werden.

Dies ist die JS Ich habe, dass die Punkte Plots und verändert die Farbe, was auch immer man angeklickt wird, (wenn sowohl der Punkt oder das Listenelement angeklickt werden):

for (i = 0; i < bars.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(bars[i][1], bars[i][2]), 
     map: map, 
     label: String(bars[i][3]), 
    }); 
    gmarkers.push(marker); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(bars[i][0]); 
      infowindow.open(map, marker); 
      for (j = 0; j < gmarkers.length; j++) { 
       gmarkers[j].setIcon(""); 
      } 
      marker.setIcon("imgs/green.png"); 
     } 
    })(marker, i)); 
} 

$('#bars-list li').each(function(i, e) { 
    $(e).click(function(i) { 
     return function(e) { 
      google.maps.event.trigger(gmarkers[i], 'click'); 
     } 
    }(i)); 
}); 

Ich habe 90% von dem, was ich möchte:

https://jsfiddle.net/ruwez7tq/

Alles, was ich tun möchte, ist die gezeichneten Punkte zu ändern, die je gezeigt sind, auf der Liste sichtbar ist. Im Moment sind nur die ersten Punkte der Liste ("Bars") zu sehen. Auch wenn dies die richtigen Seitenladepunkte sind, wenn Sie beispielsweise auf "Restaurants" klicken, sollten die nummerierten Punkte auf diese Orte aktualisiert werden.

Dies ist die JS Ich habe, dass die Punkte Plots und verändert die Farbe, was auch immer man angeklickt wird, (wenn sowohl der Punkt oder das Listenelement angeklickt werden):

Ich versuche, wie man arbeitet, um Verallgemeinern Sie dies zu jeder Liste, und wie man es benutzt, um die Karte zu aktualisieren, abhängig davon, welche Liste sichtbar ist ?!

Vielen Dank im Voraus für jede Hilfe!

Answer 1

Somethings wie folgt aus (sicherzustellen, dass Sie die Funktion und die globalen Variablen in Fenster Umfang platziert)

für Javascript

function hide_show(category){ 
    for (i = 0; i < amenities.length; i++) { 
    gmarkers[i].setMap(null); 
     if amenities[3] = category { 
     gmarkers[i].setMap(map); 
     } 
    } 
} 

für html

<div id="bars-list" class="lists" onclick"hide_show('bars');">