Google Maps API。從一個數組調用多個信息窗口

Question

我在本網站搜索了全部內容，找不到答案。我有一個lat和lng標記數組，我想打開一個基於數組索引的信息窗口。我通過用變量而不是數組列表替換標記來實現它，但我想讓代碼保持乾爽。這是我的代碼：

function initMap() { 
    var locations = [ 
     ["blairCountyPA", 40.453132, -78.384223], 
     ["scrantonPA", 41.408969, -75.662412], 
     ["warringtonTownshipPA", 40.250319, -75.166212], 
     ["lancasterCountyPA", 40.046657, -76.178374], 
     ["berkeleyCountyWV", 39.488560, -78.065193], 
     ["bowieMD", 39.006777, -76.779136], 
     ["anneArundelCountyMD", 38.953011, -76.548823], 
     ["shenandoahVA", 38.483457, -78.849748], 
     ["calvertCountyMD", 38.494950, -76.502574], 
     ["salsiburyMD", 38.360674, -75.599369], 
     ["berlinMD", 38.322615, -75.217689], 
     ["ocMD", 38.336503, -75.084906], 
     ["lynchburgVA", 37.413754, -79.142246] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: new google.maps.LatLng(39.488560, -78.065193) 
    }); 

    for(var i = 0; i < locations.length; i++) { 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      icon: 'images/pin-cloud.png', 
      animation: google.maps.Animation.DROP, 
      map: map  
     }); 
    } 

    var blairCountyContentString = 
    '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h1 id="firstHeading" class="firstHeading">Blair County, PA</h1>'+ 
    '<div id="bodyContent">'+ 
    "<p>insert info here</p>" + 
    '<p><b>Resources</b>: <a href="https://efc.umd.edu/assets/sw_case_studies/blair_county_final.pdf" <span>Case Study Blair County, PA</span> </a></p>'+ 
    '</div>'+ 
    '</div>'; 

    var blairCountyInfowindow = new google.maps.InfoWindow({ 
     content: blairCountyContentString, 
     position: locations[0] 
    }); 

    marker.addListener('click', function() { 
     blairCountyInfowindow.open(map, marker); 
    }); 

我的問題似乎與「位置：位置[0]」對象字面量。有時候我得到一個錯誤，指出這需要是一個數值lng，lat ...儘管沒有運氣，但試過了。該窗口當前打開，但僅用於數組的最後一個索引。有任何想法嗎？

Answer 1

查看更新代碼。現在，自定義信息窗口內容

Fiddle link

function initMap() { 
    var marker = []; 
    var locations = [ 
    ["blairCountyPA", 40.453132, -78.384223], 
    ["scrantonPA", 41.408969, -75.662412], 
    ["warringtonTownshipPA", 40.250319, -75.166212], 
    ["lancasterCountyPA", 40.046657, -76.178374], 
    ["berkeleyCountyWV", 39.488560, -78.065193], 
    ["bowieMD", 39.006777, -76.779136], 
    ["anneArundelCountyMD", 38.953011, -76.548823], 
    ["shenandoahVA", 38.483457, -78.849748], 
    ["calvertCountyMD", 38.494950, -76.502574], 
    ["salsiburyMD", 38.360674, -75.599369], 
    ["berlinMD", 38.322615, -75.217689], 
    ["ocMD", 38.336503, -75.084906], 
    ["lynchburgVA", 37.413754, -79.142246] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 7, 
    center: new google.maps.LatLng(39.488560, -78.065193) 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     var ContentString = 
     '<div id="content">' + 
     '<div id="siteNotice">' + 
     '</div>' + 
     '<h1 id="firstHeading" class="firstHeading">' + locations[i][0] + '</h1>' + 
     '<div id="bodyContent">' + 
     "<p>insert info here</p>" + 
     '<p><b>Resources</b>: <a href="https://efc.umd.edu/assets/sw_case_studies/blair_county_final.pdf" <span>Case Study ' + locations[i][0] + '</span> </a></p>' + 
     '</div>' + 
     '</div>'; 
     return function() { 
     infowindow.setContent(ContentString); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
    } 
}