title: Google Maps show/hide multiple overlays
body: <p>What I would like, are 2 custom overlays on a map, with the ability to show/hide both overlays separately using two buttons. Currently, I have 1 overlay that can be shown/hid with a button, but I cannot get the second overlay on the map. <a href="https://stackoverflow.com/questions/12868044/how-to-overlay-multiple-images-onto-google-maps">This suggestion</a> doesn't work for me (yet), while my code looks like this:</p>
  
  <pre><code>&lt;script&gt;
  
          var overlay;
  
          SchipholOverlay.prototype = new google.maps.OverlayView();
  
          function initialize()
          {
              var mapProp = { //set map properties
                      center:new google.maps.LatLng(52.309213,4.762316),
                      zoom:16,
                      mapTypeId:google.maps.MapTypeId.HYBRID
                      };
  
              //create map variable with properties       
              var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
  
              var swBound = new google.maps.LatLng(52.299000,4.759711);
              var neBound = new google.maps.LatLng(52.313400,4.786885);
              var swBound2 = new google.maps.LatLng(52.299000,4.759711);
              var neBound2 = new google.maps.LatLng(52.283400,4.782885);
              var bounds = new google.maps.LatLngBounds(swBound, neBound);
              var bounds2 = new google.maps.LatLngBounds(swBound2, neBound2);
  
              // Insert overlay image here
              var srcImage = 'departures_gates.gif';
              var srcImage2 = 'arrivalsdepartures2.gif';
              overlay = new SchipholOverlay(bounds, srcImage, map);
              overlay = new SchipholOverlay(bounds2, scrImage2, map);
  
          }
  
          function SchipholOverlay(bounds, image, map) {
  
          // Now initialize all properties.
          this.bounds_ = bounds;
          this.image_ = image;
          this.map_ = map;
  
          // We define a property to hold the image's
          // div. We'll actually create this div
          // upon receipt of the add() method so we'll
          // leave it null for now.
          this.div_ = null;
  
          // Explicitly call setMap() on this overlay
          this.setMap(map);
          }
  
  
          SchipholOverlay.prototype.onAdd = function() {
  
            // Note: an overlay's receipt of onAdd() indicates that
            // the map's panes are now available for attaching
            // the overlay to the map via the DOM.
  
            // Create the DIV and set some basic attributes.
            var div = document.createElement('div');
            div.style.borderStyle = 'none';
            div.style.borderWidth = '0px';
            div.style.position = 'absolute';
  
            // Create an IMG element and attach it to the DIV.
            var img = document.createElement('img');
            img.src = this.image_;
            img.style.width = '65%';
            img.style.height = '65%';
            img.style.position = 'absolute';
            div.appendChild(img);
  
            // Set the overlay's div_ property to this DIV
            this.div_ = div;
  
            // We add an overlay to a map via one of the map's panes.
            // We'll add this overlay to the overlayLayer pane.
            var panes = this.getPanes();
            panes.overlayLayer.appendChild(div);
          }
  
          SchipholOverlay.prototype.draw = function() {
  
            // Size and position the overlay. We use a southwest and northeast
            // position of the overlay to peg it to the correct position and size.
            // We need to retrieve the projection from this overlay to do this.
            var overlayProjection = this.getProjection();
  
            // Retrieve the southwest and northeast coordinates of this overlay
            // in latlngs and convert them to pixels coordinates.
            // We'll use these coordinates to resize the DIV.
            var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
            var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  
            // Resize the image's DIV to fit the indicated dimensions.
            var div = this.div_;
            div.style.left = sw.x + 'px';
            div.style.top = ne.y + 'px';
            div.style.width = (ne.x - sw.x) + 'px';
            div.style.height = (sw.y - ne.y) + 'px';
          }
  
          SchipholOverlay.prototype.onRemove = function() {
              this.div_.parentNode.removeChild(this.div_);
              //this.div_ = null;
              }
  
          SchipholOverlay.prototype.hide = function() {
              if (this.div_) {
                  this.div_.style.visibility = "hidden";
                  }
              }
  
          SchipholOverlay.prototype.show = function() {
              if (this.div_) {
                  this.div_.style.visibility = "visible";
                  }
              }
  
          SchipholOverlay.prototype.toggle = function() {
              if (this.div_) {
                  if (this.div_.style.visibility == 'hidden') {
                      this.show();
                  } else {
                      this.hide();
                  }
              }
          }
  
          //initialize the map
          google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>The html:</p>
  
  <pre><code>&lt;div id ="panel"&gt;
          &lt;input type="button" value="Toggle Visibility" onclick="overlay.toggle();"&gt;&lt;/input&gt;
       &lt;/div&gt;
      &lt;div class="map" id="googleMap" style="width:1600px;height:800px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>