title: Google Maps API: Multiple GeoJson layers with MarkerClusterer + toggle
body: <p>I have a problem with my GeoJson layers which I want to cluster (with MarkerClusterer) and then be able to show and hide them via checkboxes or similar. Therefore I tried something like the code below:</p>
  
  <pre><code>function initialize() {
      var mapOptions = {
          center: new google.maps.LatLng(52.515696, 13.392624),
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      var map = new google.maps.Map(document.getElementById("map"),
              mapOptions);
      var bounds = new google.maps.LatLngBounds();
      var barLayer = new google.maps.Data();
      var cafeLayer = new google.maps.Data();
  
      barLayer.loadGeoJson('json/eat_drink/bar.geojson');
      cafeLayer.loadGeoJson('json/eat_drink/cafe.geojson');
  
  
      var markerClusterer = new MarkerClusterer(map); 
      var infowindow = new google.maps.InfoWindow();  
      markerClusterer.setMap(map);
  
      function displayMarkers(layer) { 
      var layer = layer;
      google.maps.event.addListener(layer, 'addfeature', function (e) {
          if (e.feature.getGeometry().getType() === 'Point') {
              var marker = new google.maps.Marker({
                  position: e.feature.getGeometry().get(),
                  title: e.feature.getProperty('name'),
                  map: map
              });
              // open the infoWindow when the marker is clicked
              google.maps.event.addListener(marker, 'click', function (marker, e) {
                  return function () {
                      var myHTML = e.feature.getProperty('name');
                      infowindow.setContent("&lt;div style='width:150px; text-align: center;'&gt;"+myHTML+"&lt;/div&gt;");
                      infowindow.setPosition(e.feature.getGeometry().get());
                      infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
                      infowindow.open(map, marker);
                  };
              }(marker, e));
              markerClusterer.addMarker(marker);
              bounds.extend(e.feature.getGeometry().get());
              map.fitBounds(bounds);
              map.setCenter(e.feature.getGeometry().get());
          }
      });
      layer.setMap(null);
      google.maps.event.addListener(map, "click", function () {
          infowindow.close();
      });
  
  };
  
  document.getElementById('bar').onclick = function(){            // enable and disable markers
          if(document.getElementById('bar').checked == true){
                  displayMarkers(barLayer);
          }else{
              return null; 
          }
          };
  }
  </code></pre>
  
  <p>Unfortunatley this doesn't work and I don't no exactly why. 
  If I remove the displayMarkers() function around the code and replace "layer" with the desired GeoJson layer, e.g. "barLayer", it works just fine.
  Since I will end up with tons of GeoJason layers I would prefer a "compact" solution like this insted of copying the code multiple times. Have you guys any ideas how to do that properly?</p>