Google Maps API. Aufruf von mehreren Infofenstern von einem Array

Question

Ich habe überall auf dieser Website nach einer Antwort ohne Glück gesucht. Ich habe ein Array von Lat- und lng-Markern und möchte ein Info-Fenster basierend auf dem Array-Index öffnen. Ich habe es funktioniert, indem ich Markierungen durch Variablen anstelle einer Array-Liste ersetzt habe, aber ich möchte meinen Code DRY behalten. Hier ist mein Code:

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

Mein Problem scheint mit dem als "Position: Stellen [0]" wörtliche Objekt. Manchmal bekomme ich einen Fehler, der besagt, dass dies ein Zahlenwert von lng, lat sein muss ... Versuchte es aber ohne Glück. Das Fenster wird derzeit geöffnet, jedoch nur für den letzten Index des Arrays. Irgendwelche Ideen?

Answer 1

Siehe aktualisierten Code. Jetzt passen Sie die Infofenster Inhalt

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