В Google Maps API v3 должно быть открыто только одно окно InfoWindow.

Question

Я пытаюсь запустить Google Maps API v3 в проекте ASP. NET MVC, и я пытаюсь построить карту с маркерами и информацией windows. Я хотел бы построить карту так, чтобы единовременно можно было открывать только одно информационное окно, а его содержимое основывалось на маркере, к которому оно прикреплено.

Я рассмотрел несколько вопросов именно по этому топу c, но ни одно из решений в моем проекте не помогло. Что я делаю не так?

Вот моя неудачная попытка открыть только одно информационное окно. Прямо сейчас он отображает карту и маркеры, но информация не открывается. windows открывается, когда я нажимаю на маркеры.

@model Project.Models.MapViewModel

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
        height: 400px;
        width: 400px;
    }
</style>


<div class="row">
    <div id="map"></div>
    <script>
        var map;
        function initMap() {
            var infoWindow = new google.maps.InfoWindow();
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 39.5, lng: -98.35 },
                zoom: 3
            });

            google.maps.event.addListener(map, 'click', function () {
                infoWindow.close();
            });

            var markers = [];



            @for (var i = 0; i < Model.Addresses.Count; i++) {
                <text>
                    var marker = new google.maps.Marker({
                        map: map,
                        position: { lat: @Model.Addresses[i].Lat, lng: @Model.Addresses[i].Lng },
                        title: '@Model.Addresses[i].Name'
                    });

                    markers.push(marker)
                </text>
             }

            //google.maps.event.addListener(marker, 'click', function () {
            //    infoWindow.setContent(`<div id="content"> <h1 id="firstHeading" class="firstHeading">Test</h1> <div id="bodyContent">Test </div> </div>`);
            //    infoWindow.open(map, marker);
            //});

            for (var i = 0, marker; marker = markers[i]; i++)
            {
                google.maps.event.addListener(marker, 'click', function () {
                    infoWindow.setContent(`<div id="content"> <h1 id="firstHeading" class="firstHeading">Test</h1> <div id="bodyContent">Test </div> </div>`);
                    infoWindow.open(map, marker);
                });
            }
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"
            async defer></script>

</div>

Вот мой рабочий код, который (не в идеале) допускает несколько открытых данных windows :

@model IEnumerable<Project.Models.Address>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
        height: 400px;
        width: 400px;
    }
</style>


<div class="row">
    <div id="map"></div>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 39.5, lng: -98.35 },
                zoom: 3
            });
            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(map, 'click', function () {
                infoWindow.close();
            });

            @foreach (var item in Model) {
                 <text>
                var marker = new google.maps.Marker({
                    map: map,
                    position: { lat: @item.Lat, lng: @item.Lng },
                    title: '@item.Name'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    infoWindow.setContent(`<div id="content"> <h1 id="firstHeading" class="firstHeading">${@item.Name}</h1> <div id="bodyContent">${@item.Blurb}</div> </div>`);
                    infoWindow.open(map, marker);
                });
                </text>
            }
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"
            async defer></script>

</div>