Динамическое добавление InfoWindows и Маркеров в Google Maps V3

Question

У меня очень раздражающая проблема с Google Map V3 JavaScript API. Возможно, проблема связана с моим кодом JavaScript.

Вот мой полный код:

<script>
    var __mvcGoogleMap;
    var __mvcGeocoder;
    var markersArray = [];
    var infoWindowsArray = [];

    function _initializeGoogleMap() {

        __mvcGeocoder = new google.maps.Geocoder();

        var latlng = new google.maps.LatLng(38.98569417582484, 35.351452857849154);

        var myOptions = {
            zoom: 6,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: true,
            streetViewControl: false,
            overviewMapControl: true
        };
        __mvcGoogleMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function findOnMap() { 

        var srchVal = $("#txtMapSearch").val();

        __mvcGeocoder.geocode({'address': srchVal}, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {

                actionURL = '/accommodation/HotelsForMap';
                actionData = 'lat=' + results[0].geometry.location.lat() + '&lng=' + results[0].geometry.location.lng();

                var _latLongs = [];
                var _infoWindows = [];

                $.ajax({
                    type: "POST",
                    url: actionURL,
                    data: actionData,
                    success: function (r) {

                        if (markersArray) {
                            for (i in markersArray) {
                                markersArray[i].setMap(null);
                            }
                            markersArray.length = 0;
                        }

                        for (var i = 0; i < r.length; i++) {

                            _latLongs.length = 0;
                            _infoWindows.length = 0;

                            _latLongs[i] = new google.maps.LatLng(r[i].LatLong.Latitude, r[i].LatLong.Longitute);

                            addMarker(_latLongs[i], r[i].Title);
                            addInfoWindow(r[i].InfoWindow.Content, markersArray[i]);
                            google.maps.event.addListener(markersArray[i], 'click', function() {

                                infoWindowsArray[i].open(__mvcGoogleMap, markersArray[i]);
                            });
                        }

                        var _currentPossition = results[0].geometry.location;
                        __mvcGoogleMap.setCenter(_currentPossition);
                        __mvcGoogleMap.setZoom(14);
                    }
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }

    function addMarker(location, title) {
        marker = new google.maps.Marker({
            position: location,
            title: title,
            map: __mvcGoogleMap,
            draggable: false
        });

        markersArray.push(marker);
    }

    function addInfoWindow(content, marker) { 

        infoWindow = new google.maps.InfoWindow({
            content: content
        });
        infoWindowsArray.push(infoWindow);
    }

    $(function() { 
        $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=_initializeGoogleMap', function() { 
            $(window).load(_initializeGoogleMap);
        });
    });

    $("#btnMapSearch").click(function() { 
        findOnMap();
    });
</script>

Вот ситуация: я пытаюсь сделать так, чтобы после инициализации карты и поиска места я получил значения LatLang и отправил их на мой сервер. Затем я возвращаю результаты с моего сервера с некоторой информацией об отеле (имя, лат, язык и т. Д.).

Затем я устанавливаю маркер в нужных местах и ​​прикрепляю информационное окно к каждому маркеру. Все отлично работает, кроме infoWindows.

Когда я нажимаю на маркер, я вижу эту ошибку в окне консоли браузера:

Uncaught TypeError: Невозможно вызвать метод 'open' из неопределенного

Не могли бы вы взглянуть на то, что я делаю здесь неправильно?

Answer 1

Вам нужно будет создать замыкание для значения i, чтобы оно присваивалось вложенной переменной во время создания каждой анонимной функции.Если нет, то при продолжении цикла значение i будет изменяться до тех пор, пока цикл не выйдет, и в нем останется значение, равное длине вашего массива + 1 (всегда неопределенный индекс),i, к которому относятся все ваши анонимные функции.Попробуйте следующее в цикле обратного вызова AJAX:

google.maps.event.addListener(markersArray[i], 'click', (function(idx) {
    return function() {
        infoWindowsArray[idx].open(__mvcGoogleMap, markersArray[idx]);
    };
})(i));