Закрытие Infowindow с использованием API Googlemaps

Question

Я читал эту проблему снова и снова и пробовал несколько различных решений, которые были предложены, и теперь я думаю, что я полностью ушел в неправильном направлении. Я просто пытаюсь закрыть инфоиндуст, когда откроется следующий щелчок.

JSFiddle покажет всплывающие окна при нажатии на маркер, но открывается несколько, если вы продолжаете нажимать. https://jsfiddle.net/RaeRae961/dp64cbwv/1/ Вот код:

(function init() { 
 
    var dataKey = '1n-q5n4aaIn95SM0OGoZ6yDp0aSk4gfWeh0-yILHqAS8'; 
 
    var mapOptions = { 
 
    center: { 
 
     lat: 39.7392, 
 
     lng: -104.9903 
 
    }, 
 
    zoom: 11 
 
    }; 
 

 
    var energyStarLogo = "energy_star_logo_small.png" 
 
    var starGreen = "http://www.googlemapsmarkers.com/v1/00FF0D/" 
 
    var starYellow = "http://www.googlemapsmarkers.com/v1/FFF000/" 
 
    var starGrey = "http://www.googlemapsmarkers.com/v1/8A8989/" 
 

 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
    function content(building) { 
 
    { 
 
     content: building.address1 
 
    } 
 
    }; 
 

 
    function determineIcon(building) { 
 
    if (building.energyStarYears.indexOf('2014')) { 
 
     return energyStarLogo; 
 
    } 
 
    // else if (!building.energyStarYears.indexOf('2014')) 
 
    else { 
 
     return starGreen; 
 
    } 
 
    // else{ 
 
    // return starGrey; 
 
    // } 
 
    }; 
 

 
    function addMarker(building_data) { 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: new google.maps.LatLng(building_data.lat, building_data.lng), 
 
     icon: determineIcon(building_data) 
 
    }); 
 
    // console.log(building_data); 
 
    var infowindow = new google.maps.InfoWindow({ 
 
     content: "<p>" + "<strong>Property Name: </strong>" + building_data.propertyname + "</p>" + "<p>" + "<strong>Address: </strong>" + building_data.address + "</p>" + "<p>" + "<strong>Energy Star Score: </strong>" + building_data.energyStarScore + "</p>" + "<p>" + "<strong>Energy Star Years: </strong>" + building_data.energyStarYears + "</p>" + "<p>" + "<strong>Energy Use Intensity (kbtu/sq ft): </strong>" + building_data.energyUseIntensity + "</p>" + "<p>" + "<strong>Property Type: </strong>" + building_data.propertyType + "</p>" + "<p>" + "<strong>Gross Square Footage: </strong>" + building_data.squareFootage + "</p>" + "<p>" + "<strong>Year Built: </strong>" + building_data.yearBuilt + "</p>" + "<p>" + "<strong>Building Website: </strong>" + building_data.website + "</p>" 
 
     // + "<p>" + "<strong>Other Green Certifications/Programs: </strong>" + building_data. + "</p>" 
 
     + "<p>" + "<strong>Top Energy Efficient Strategies: </strong>" + building_data.energyStrategies + "</p>" 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
     infowindow.open(map, marker); 
 
    }); 
 
    } 
 

 

 

 
    function dataCallback(data, tabletop) { 
 
    var benchmarked = data['Benchmarked Buildings'].elements; 
 
    // var allBuildings = data['All Buildings over 10000 sq ft'].elements; 
 

 
    benchmarked.forEach(function(building) { 
 
     // console.log(building); 
 
     if (building.lat && building.lng) { 
 
     addMarker({ 
 
      lat: building.lat, 
 
      lng: building.lng, 
 
      address: building.address1, 
 
      energyStarScore: building.energystarscore, 
 
      energyStarYears: building['energystarcertification-yearscertified'], 
 
      energyUseIntensity: building.weathernormalizedsiteeuikbtuft, 
 
      propertyname: building.propertyname, 
 
      propertyType: building['primarypropertytype-selfselected'], 
 
      squareFootage: building.grosssquarefootage, 
 
      yearBuilt: building.yearbuilt, 
 
      website: building.buldingwebsite, 
 
      // certifications: building. 
 
      energyStrategies: building['whatarethetopthreeefficiencystrategiesyouhaveimplementedinyourbuildingifyourbuildinghasbeenwrittenupasacasestudypleaseincludethelinktoithereoremailittodenvercepdenvergov.org.'] 
 
     }); 
 
     } 
 
    }); 
 
    } 
 

 
    Tabletop.init({ 
 
    key: dataKey, 
 
    callback: dataCallback 
 
    }); 
 
})();

Я так ново для JS, я знаю, это было предложено несколько раз, и я попытался реализовать эти ответы, но просто не могу достаточно оцените это, будьте добры.

Использование close() и внесение infowindow в глобальную переменную закроет каждое окно, но затем оно сломает tabletop.js (я думаю) и вытаскивает только один адрес здания на всех маркерах, поэтому он не тянет правильная информация.

Как я могу использовать метод close() и сделать infowindow в глобальной переменной, но все же позволить функции работать при извлечении данных?

Answer 1

Что вам нужно сделать, это выполнить infowindow_prev.close() перед открытием любой InfoWindow где infowindow_prev будет иметь ссылку на ранее открытые infowindow.For, что вы можете объявить в infowindow_prev переменные в функции init(). Теперь любая внутренняя функция в init() будет иметь доступ к переменной infowindow_prev (это называется закрытой проверкой this ссылка для получения дополнительной информации), а внутри маркера щелчок назначает infowindow_prev как infowindow, поэтому у него будет открытый объект inforwindow.

заказ this fiddle

enter code here(function init() { 
var dataKey = '1n-q5n4aaIn95SM0OGoZ6yDp0aSk4gfWeh0-yILHqAS8'; 
    var mapOptions = { 
center: { 
    lat: 39.7392, 
    lng: -104.9903 
}, 
zoom: 11 
}; 

var energyStarLogo = "energy_star_logo_small.png" 
var starGreen = "http://www.googlemapsmarkers.com/v1/00FF0D/" 
var starYellow = "http://www.googlemapsmarkers.com/v1/FFF000/" 
var starGrey = "http://www.googlemapsmarkers.com/v1/8A8989/" 
var infowindow_prev; 
var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    function content(building) { 
{content: building.address1} 
}; 

    function addMarker(building_data) { 
var marker = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(building_data.lat, building_data.lng), 
    icon: determineIcon(building_data) 
}); 
// console.log(building_data); 
infowindow = new google.maps.InfoWindow({ 
    content: "<p>" + "<strong>Property Name: </strong>" + building_data.propertyname + "</p>" 
    + "<p>" + "<strong>Address: </strong>" + building_data.address + "</p>" 
    + "<p>" + "<strong>Energy Star Score: </strong>" + building_data.energyStarScore + "</p>" 
    + "<p>" + "<strong>Energy Star Years: </strong>" + building_data.energyStarYears + "</p>" 
    + "<p>" + "<strong>Energy Use Intensity (kbtu/sq ft): </strong>" + building_data.energyUseIntensity + "</p>" 
    + "<p>" + "<strong>Property Type: </strong>" + building_data.propertyType + "</p>" 
    + "<p>" + "<strong>Gross Square Footage: </strong>" + building_data.squareFootage + "</p>" 
    + "<p>" + "<strong>Year Built: </strong>" + building_data.yearBuilt + "</p>" 
    + "<p>" + "<strong>Building Website: </strong>" + building_data.website + "</p>" 
    // + "<p>" + "<strong>Other Green Certifications/Programs: </strong>" + building_data. + "</p>" 
    + "<p>" + "<strong>Top Energy Efficient Strategies: </strong>" + building_data.energyStrategies + "</p>" 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    if(infowindow_prev) 
     infowindow_prev.close(); 
    infowindow_prev = infowindow; 
    infowindow.open(map, marker); 
}); 
} 



function dataCallback(data, tabletop) { 
var benchmarked = data['Benchmarked Buildings'].elements; 
// var allBuildings = data['All Buildings over 10000 sq ft'].elements; 
benchmarked.forEach(function(building) { 
    // console.log(building); 
    if (building.lat && building.lng) { 
    addMarker(
     { 
     lat: building.lat, 
     lng: building.lng, 
     address: building.address1, 
     energyStarScore: building.energystarscore, 
     energyStarYears: building['energystarcertification-yearscertified'], 
     energyUseIntensity: building.weathernormalizedsiteeuikbtuft, 
     propertyname: building.propertyname, 
     propertyType: building['primarypropertytype-selfselected'], 
     squareFootage: building.grosssquarefootage, 
     yearBuilt: building.yearbuilt, 
     website: building.buldingwebsite, 
     // certifications: building. 
     energyStrategies: building['whatarethetopthreeefficiencystrategiesyouhaveimplementedinyourbuildingifyourbuildinghasbeenwrittenupasacasestudypleaseincludethelinktoithereoremailittodenvercepdenvergov.org.'] 
     } 
    ); 
    } 
}); 
} 

    Tabletop.init({ 
    key: dataKey, 
    callback: dataCallback 
    }); 
})();