无论单击哪一个，最后一个 Google 地图标记的信息窗口都会打开

Question

I'm trying to run the google maps api in an ASP.NET MVC project, and I'm trying to add markers with info windows on every marker. Unfortunately, when I click on a marker, the info window on the last marker added opens, regardless of which marker I clicked.

Here is my code:

<script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 39.5, lng: -98.35 },
                zoom: 3
            });
            @foreach (var item in Model) {
                 <text>
                    var marker = new google.maps.Marker({
                      map: map,
                      position: { lat: @item.Lat, lng: @item.Lng },
                      title: '@item.Name'
                    });

                    marker.info = new google.maps.InfoWindow({
                        content: `<div id="content"> <h1 id="firstHeading" class="firstHeading">Test</h1> <div id="bodyContent">Test </div> </div>`
                    });

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

                </text>
}
        }
    </script>

Answer 1

Sorry removed previous answer..

I just remembered I believe when I was doing my project I had to create a createWindow(marker, content) function and call it from the loop rather than actually creating my window inside of the loop directly

it is important that your eventlistener is created in this method also, not inside the loop