Как работает присваивание обработчиков внутри for?

Question

[Barrakuda74]

Ребят подскажите пожалуйста алгоритм работы кода внутри цикла for.
На сайте Google Maps есть пример размещения нескольких маркеров, каждый со своим информ. окном.
Этот код работает отлично, добавляет 5 маркеров в опр. области, у каждого свой обработчик со своим информ. окном. В примере почему-то вытаскивают наружу функцию создания информ.окон из initMap. И мне не понятно, почему, когда я пытаюсь обратно вставить просто этот код в initMap, то появляется так же 5 маркеров, но при клике на любом из них открывается информ. окно только над последним маркером. Где неправильный участок в цикле for?

Вот здесь я просто убрал внешнюю функцию attachSecretMessage, а где из-за этого затык, не пойму, ведь логика кода по сути осталась одинаковой:

function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 5,
		center: {lat: -25.363882, lng: 131.044922 }
	});

	var bounds = {
		north: -25.363882,
		south: -31.203405,
		east: 131.044922,
		west: 125.244141
	};
	map.fitBounds(bounds);
	
	var secretMessages = ['This', 'is', 'the', 'secret', 'message'];
	var lngSpan = bounds.east - bounds.west;
	var latSpan = bounds.north - bounds.south;
	for (var i = 0; i < secretMessages.length; ++i) {
		var marker = new google.maps.Marker({
			position: {
				lat: bounds.south + latSpan * Math.random(),	
				lng: bounds.west + lngSpan * Math.random()
			},
			map: map
		});
		var infowindow = new google.maps.InfoWindow({
			content: secretMessages[i]
		});
		marker.addListener('click', function() {
			infowindow.open(marker.get('map'), marker);
		});
	}
}

Answer 1

[Barrakuda74]

oxidmod спасибо огромное! Ваш код сработал просто на раз. Дошло наконец что запоролся на логике работы замыкания внутри цикла и области видимости переменных. Кстати, помимо инкапсуляции всего кода цикла анонимной самовызывающейся функцией, есть второй вариант решения проблемы, это декларирование переменных infowindow и marker ключевым словом let вместо var.