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]"对象字样有关。有时我会遇到一个错误，说这必须是液化天然气的数字值，lat ...尽管没有运气，但尝试了。窗口当前打开，但仅用于数组的最后一个索引。有什么想法吗？

Answer 1

请参阅更新的代码。现在自定义InfowDOW内容

小提琴链接

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