for 循环中的信息 window 无法运行

Question

我正在尝试在某些标记上打开一些信息 windows。我正在关注我没有在控制台中抛出任何错误。我希望信息 windows 打开但看不到任何东西。我已尝试确保所有变量都是全局变量，在我调用事件侦听器的位置和我调用标记和信息 window 的 for loop 结构中移动。我试过在监听事件中关闭 markers 和 marker，但都没有用。

我做错了什么？

Fiddle here.

HTML:

<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
    <h1 style="text-align: center;">Parking Garage Availability</h1>

    <div id="map"></div>

    <ul id="list"></ul>
    <p id="GAR57"></p>
    <p id="GAR31"></p>
    <p id="GAR60"></p>
    <p id="GAR61"></p>
</body>

CSS:

#map {
    height: 300px;
    width: 500px;
    margin: 0 auto;
    border: 1px solid black;
}

JavaScript:

var map;
var mapProp;
var marker;
var markers;
var url;
var myData;
var time;
var available;
var total;
var facility;
var position;
var infoWindow;

function initialize() {
  mapProp = {
    center:new google.maps.LatLng(38.994890, -77.063416),
    zoom:13,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"),mapProp);
}

$(document).ready(function() {
    initialize();
    url = 'https://data.montgomerycountymd.gov/resource/qahs-fevu.json';

    $.getJSON(url, function(data) {
        myData = data;
        console.log(myData);
        for (i = 0; i < myData.length; i++) {
            time = (myData[i].asofdatetime).slice(11);
            available = myData[i].space_count;
            total = myData[i].total_spaces;
            facility = myData[i].facilitynumber;
            if (facility === "GAR 57") {
                facility = "4841 Bethesda Avenue (Elm Street)";
                $('#GAR57').html('As of ' + time + ' there are ' + available +
                    ' of ' + total + ' at ' + facility);
            } else if (facility === "GAR 31") {
                facility = "7171 Woodmont Avenue";
                $('#GAR31').html('As of ' + time + ' there are ' + available +
                    ' of ' + total + ' at ' + facility);
            } else if (facility === "GAR 60") {
                facility = "921 Wayne Avenue";
                $('#GAR60').html('As of ' + time + ' there are ' + available +
                    ' of ' + total + ' at ' + facility);
            } else {
                facility = "801 Ellsworth Drive";
                $('#GAR61').html('As of ' + time + ' there are ' + available +
                    ' of ' + total + ' at ' + facility);
            }
        }
    });

    //set markers
    markers = [
    ["4841 Bethesda Avenue (Elm Street)", 38.980724, -77.0964],
    ["7171 Woodmont Avenue", 38.980097, -77.093662],
    ["921 Wayne Avenue", 38.995740, -77.025652],
    ["801 Ellsworth Drive",38.997778, -77.025071]
    ];

    infoWindow = new google.maps.InfoWindow();

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

        google.maps.event.addListener(markers, 'click', function () {
            infoWindow.setcontent("<div>Hello, World</div>");
            infoWindow.open(map, this);
        });
    };


});

Answer 1

把最后一个代码改成这个

google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent("<div>Hello, World</div>");
        infoWindow.open(map, this);
    });

marker 而不是 markers，setContent 而不是 setcontent

updated fiddle

for 循环中的信息 window 无法运行

info window in for loop not functioning

javascript

jquery

google-maps

infowindow