Добавление нескольких маркеров с помощью информационных окон ( Google Maps API)

В настоящее время я использую следующий код для размещения нескольких маркеров на карте Google с помощью их API.

У меня проблема с несколькими информационными окнами, которые не работают (отображается только последнее).

Есть множество вопросов, подобных моему, здесь, на SO. На самом деле сделайте это кучу вопросов: -)

Просто пример: Попытка привязать несколько информационных окон к нескольким маркерам на карте Google и неудача

Решение моей проблемы довольно простое: просто приложите щелчок слушатель (анонимной) функции.

Однако я не понимаю, почему мое решение не работает (сохранение маркеров и информационных окон в массивах вместо одной переменной).

    var markers = [];
    var infowindows = [];

    // add shops or malls
    for (var key in data.markers) {
      if (data.markers.hasOwnProperty(key)) {
        infowindows[key] = new google.maps.InfoWindow({
            content: data.markers[key].infowindow
        });

        markers[key] = new google.maps.Marker({
                position: new google.maps.LatLng(data.markers[key].location.lat, data.markers[key].location.lng),
                map: map,
                flat: true,
                title: data.markers[key].name,
                draggable: false
        });
        var iconFile = 'http://maps.google.com/mapfiles/ms/icons/'+marker_color+'-dot.png';
        markers[key].setIcon(iconFile);

        google.maps.event.addListener(markers[key], 'click', function() {
          infowindows[key].open(map, markers[key]);
        });
      }
    }

Итак ... Я не Нет, что получить решение, как заставить его работать с какой-либо функцией для включения слушателя (хотя он должен работать, еще не тестировал, но будет), но я хочу знать причину, по которой это не сработает, если я вместо этого добавьте в массивы маркеры и информационные окна.