Google maps api. Как разместить несколько инфоблоков на карте?

Question

[Даниил]

Доброго всем! Есть такой код:

var cityMap = new google.maps.Map(document.getElementById('cityMap'), {
    zoom: 12,
});
var infowindow = new google.maps.InfoWindow();
var services = document.getElementsByClassName('s__item');
var marker;
var geocoderCity = new google.maps.Geocoder();

for ( i=0; i < services.length; i++ ) {
    var address = $(services[i]).find('.s__item__address_at').text();
    var contentString = address;

    geocoderCity.geocode({'address': address}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            center = results[0].geometry.location;
            cityMap.setCenter(results[0].geometry.location);

            marker = new google.maps.Marker({
                map: cityMap,
                position: center,                   
            });

            google.maps.event.addListener(marker, 'click', (function(marker) {
                return function() {
                    infowindow.setContent(contentString);
                    infowindow.open(cityMap, marker);
                }
            })(marker));
        }
    });
}

Смысл такой: на странице есть несколько блоков "s__item" с адресами; я получаю адрес в цикле перебора элементов и через геокодер получаю координаты; потом устанавливаю маркеры и инфоокна, но в инфоокне на всех маркерах отображается только данные последней итерации. Как это правильно сделать?
jsfiddle

Answer 1

[freeExec]

Ну правильно, ведь у вас переменная contentString одна на весь цикл. И когда вы создаёте маркер в ней остаётся последнее значение. Заверните создание маркера в отдельную функцию, тогда переданный в неё параметр будет для каждого вызова свой. https://jsfiddle.net/sxbkjxwe/

Comments

[Даниил]

Благодарствую. Я где-то рядом был с решением, думал уже все перепробовал, сказалась нехватка теории )