Карты Google показывают/скрывают несколько наложений

Question

Что мне нужно, это 2 пользовательских оверлея на карте, с возможностью отображения/скрыть оба наложения отдельно с помощью двух кнопок. В настоящее время у меня есть 1 наложение, которое можно отобразить/спрятать с помощью кнопки, но я не могу получить второй оверлей на карте. This suggestion не работает для меня (пока), в то время как мой код выглядит следующим образом:

<script> 

     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); 

HTML-:

<div id ="panel"> 
     <input type="button" value="Toggle Visibility" onclick="overlay.toggle();"></input> 
    </div> 
    <div class="map" id="googleMap" style="width:1600px;height:800px;"></div> 

Любая помощь будет принята с благодарностью!

Answer 1

Храните уникальную ссылку на каждый оверлей (как указано в связанном вопросе).

Вместо этого (который перезаписывает ссылка на первый):

 overlay = new SchipholOverlay(bounds, srcImage, map); 
     overlay = new SchipholOverlay(bounds2, srcImage2, map); 

дать им уникальные имена или толкать их на массив:

 // in the global scope 
     var overlays = []; 

     overlays.push(new SchipholOverlay(bounds, srcImage, map)); 
     overlays.push(new SchipholOverlay(bounds2, srcImage2, map)); 

Примечание: scrImage2, кажется, опечатка ,

<input type="button" value="Toggle Visibility 1" onclick="overlays[0].toggle();"></input> 
    <input type="button" value="Toggle Visibility 2" onclick="overlays[1].toggle();"> 

example (нет изображения)