google maps 닫기 infoBox

Question

다른 하나가 열렸을 때 infoBox를 닫아야합니다. 나는 이것에 관해 많은 실을 보았고, 나는 읽은 모든 것과 운이없는 것을 모두 시험해 보았습니다.

내 문제에 infobox에 대한 전역 변수가없는 것 같았지만 아직 행운을 찾지 못했다. 하지만지도를 클릭하면 모든 infobox가 닫힐 것이므로 다른 마커를 클릭하면 작동하지 않는 이유는 확실치 않습니다.

여기 내 현재 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으로 묶여있다.