谷歌地圖關閉infoBox

Question

我需要關閉一個信息框，當另一個打開。我已經看到很多關於這個的線索，並且我已經嘗試了我讀過的所有內容，但沒有運氣。

我以爲我的問題沒有一個信息框的全局變量，但在我做了一個仍然沒有運氣。但是，如果你點擊地圖，它會關閉所有的信息框，所以不知道爲什麼這是可行的，但不是當你點擊另一個標記時？

這是我目前的JS：

var infobox; 

function createMap(mapDataTrending, mapDataRestaurants, mapDataBars) { 
     //circles for 4sq Trending data 
     var cityCircle, cityCircle2, cityCircle3, infobox, infobox2, infobox3; 

     for (var i = 0; i < mapDataTrending.length; i++) { 
      contentString = '<p class="venuename"> ' + mapDataTrending[i].name + '</p>'; 
      contentString += '<p class="venueaddress"> ' + mapDataTrending[i].address; 
      contentString += '<p class="venuecount"> ' + mapDataTrending[i].count + " ARE HERE"; 

      infobox = new InfoBox({ 
       content: contentString, 
       //content: document.getElementById("infobox"), 
       disableAutoPan: false, 
       maxWidth: 150, 
       pixelOffset: new google.maps.Size(-140, 6), 
       zIndex: null, 
       boxClass: "infoTrending", 
       boxStyle: { 
        width: "200px" 
       }, 
       closeBoxMargin: "1px", 
       closeBoxURL: "img/close-btn.png", 
       infoBoxClearance: new google.maps.Size(1, 1) 
      }); 

      var markerIcon = [ 
          "img/marker-icon-1.png", 
          "img/marker-icon-2.png", 
          "img/marker-icon-3.png", 
          "img/marker-icon-4.png", 
          "img/marker-icon-5.png", 
          "img/marker-icon-6.png", 
          "img/marker-icon-7.png", 
          "img/marker-icon-8.png", 
          "img/marker-icon-9.png", 
          "img/marker-icon-10.png" 
         ]; 

     var image = new google.maps.MarkerImage(
      markerIcon[i], 
      // This marker is 129 pixels wide by 42 pixels tall. 
      new google.maps.Size(18, 18), 
      // The origin for this image is 0,0. 
      new google.maps.Point(0,0), 
      // The anchor for this image is the base of the flagpole at 18,42. 
      new google.maps.Point(9, 9) 
     ); 



      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng), 
       anchor: new google.maps.Point(0,32), 
       icon: image, 
       map: map 
      });   


      bindInfoW(marker, contentString, infobox); 

     } 

     function bindInfoW(marker, contentString, infobox){ 
      google.maps.event.addListener(marker, 'click', function() { 

       if(infobox){ 
        infobox.close(); 
       } 

       infobox.setContent(contentString); 
       infobox.open(map, marker); 

       google.maps.event.addListener(map, 'click', function() { 
        if(infobox){ 
         infobox.close(); 
        } 
       }); 

      }); 
     } 

Answer 1

在mapDataTrending環實例多InfoBox ES相反的，一個實例與全球空content。然後你可以取出當地的infobox變量，處理程序將使用全局引用。

你的腳本最終應該是這樣的：

var infobox = new InfoBox({ 
    content: '', 
    disableAutoPan: false, 
    maxWidth: 150, 
    pixelOffset: new google.maps.Size(-140, 6), 
    zIndex: null, 
    boxClass: "infoTrending", 
    boxStyle: { 
     width: "200px" 
    }, 
    closeBoxMargin: "1px", 
    closeBoxURL: "img/close-btn.png", 
    infoBoxClearance: new google.maps.Size(1, 1) 
}); 

function createMap(mapDataTrending, mapDataRestaurants, mapDataBars) { 
    //circles for 4sq Trending data 
    var cityCircle, cityCircle2, cityCircle3; 

    for (var i = 0; i < mapDataTrending.length; i++) { 
     contentString = '<p class="venuename"> ' + mapDataTrending[i].name + '</p>'; 
     contentString += '<p class="venueaddress"> ' + mapDataTrending[i].address; 
     contentString += '<p class="venuecount"> ' + mapDataTrending[i].count + " ARE HERE"; 

     var markerIcon = [ 
         "img/marker-icon-1.png", 
         "img/marker-icon-2.png", 
         "img/marker-icon-3.png", 
         "img/marker-icon-4.png", 
         "img/marker-icon-5.png", 
         "img/marker-icon-6.png", 
         "img/marker-icon-7.png", 
         "img/marker-icon-8.png", 
         "img/marker-icon-9.png", 
         "img/marker-icon-10.png" 
        ]; 

    var image = new google.maps.MarkerImage(
     markerIcon[i], 
     // This marker is 129 pixels wide by 42 pixels tall. 
     new google.maps.Size(18, 18), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 18,42. 
     new google.maps.Point(9, 9) 
    ); 


     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng), 
      anchor: new google.maps.Point(0,32), 
      icon: image, 
      map: map 
     });   


     bindInfoW(marker, contentString); 

    } 

    function bindInfoW(marker, contentString){ 
     google.maps.event.addListener(marker, 'click', function() { 

      if(infobox){ 
       infobox.close(); 
      } 

      infobox.setContent(contentString); 
      infobox.open(map, marker); 

     }); 
    } 

我也刪掉了越來越每次點擊綁定的第二click處理程序，因爲它是多餘的，漏水的，如果你沒有那個大家還不任何標記t與bindInfoW綁定。