google maps api v3 infoBubble array not working

Question

I have a map that uses infoBubble.js.

In this map there is an array of locations that I iterate through.

The infoBubble should pop up when the custom icon is clicked but for some reason it only ever opens up the first data item.

Does anyone have an idea as to why that may happen?

I have developed the code for it here;

var arrMarkers = [
    ['Santiago de Cuba', 20.040450354169483, -75.8331298828125],
    ['Las Tunas', 20.97682772467435, -76.9482421875],
    ['Camaguey', 21.39681937408218, -77.9205322265625],
    ['Playa Santa Lucia', 21.555284406923192, -77.0526123046875],
    ['Santa Clara', 22.421184710331854, -79.9639892578125],
    ['Cienfuegos', 22.161970614367977, -80.4473876953125],
    ['Havana', 23.12520549860231, -82.3919677734375],
    ['San Cristobel', 22.730590425493833, -83.045654296875],
    ['Pinar del Rio', 22.43641760076311, -83.69384765625]
];

var arrInfoWindowsCuba = [];

var arrInfoWindows = [];
arrMarkers[i] = marker;

function init() {

    var mapCenter = new google.maps.LatLng(21.616579336740603, -78.892822265625);
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 7,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    var image = '/wp-content/themes/Shootcuba/images/map-icon.png';

    for (i = 0; i < arrMarkers.length; i++) {
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(arrMarkers[i][1], arrMarkers[i][2]),
            icon: image
        });


        var infoBubble = new InfoBubble({
            content: '<div class="phoneytext">' + arrMarkers[i][0] + '<div class="left-col2"></div></div>',
            boxClass: 'info-box',
            alignBottom: true,
            pixelOffset: new google.maps.Size(-150, -40),
            maxWidth: 300,
            padding: 0,
            closeBoxMargin: '0px',
            borderColor: '#ffffff',
            borderRadius: '0',
            maxWidth: 535,
            disableAutoPan: false,
            hideCloseButton: false,
            backgroundClassName: 'phoney'
        });
        google.maps.event.addListener(marker, 'click', function () {
            infoBubble.open(map, marker, i);
            console.log(arrMarkers);
        });

        arrMarkers[i] = marker;
        arrInfoWindowsCuba[i] = infoBubble;

    }
}

Answer 1

Here's a working example. I took out a few of the arrays you had (I wasn't entirely sure what they were all for, and they were causing errors in just the snippet you posted), but otherwise is pretty true to what you were doing. The big difference is that I made a separate function for creating the markers. This was mainly done to keep the scope of the click events separate from one another, since the click event always triggering the last event indicates to me that the scopes aren't properly separate.

In particular, what I believe was happening is that the event function you kept overriding values to marker and infoBubble, and the event listener would refer to the current values of those variables, not the values when you first attach the listener. Making a separate function call to maintain the scope for the events strikes me as the cleanest solution.