Google Maps - Identical values in all info windows

Question

Like many other people I'm finding identical values within my info windows. Alas, I've been using other posts in an attempt to troubleshoot. No luck.

Issue: Each of my infowindows shows the same values. Sigh.

Any help would be appreciated.

var map;
function initialize() {
    var markers = [];
    var mapOptions = {
        zoom: 4,
        scrollwheel: false,
        streetViewControl: true,
        panControl: true,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE
        //  position: google.maps.ControlPosition.LEFT_CENTER
        },

        center: new google.maps.LatLng(-25.898854, 134.091377)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    setMarkers(map, beaches);

    infowindow = new google.maps.InfoWindow({
        content: "Loading..."
    });

    var input = /** @type {HTMLInputElement} */(
        document.getElementById('pac-input'));
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var searchBox = new google.maps.places.SearchBox(
        /** @type {HTMLInputElement} */(input));

    google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    for (var i = 0, marker; marker = markers[i]; i++) {
        marker.setMap(null);
    }

    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
    var image = {
        //url: 'assets/img/icon_pin.png',
        //size: new google.maps.Size(40, 52),
        //origin: new google.maps.Point(0, 0),
        //anchor: new google.maps.Point(26, 20)
    };

    var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
    });

    markers.push(marker);
    bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
});

    google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
        searchBox.setBounds(bounds);
    });
}

var beaches = [
    ['Auburn', -33.847113, 151.04485, 1, '100', 'Parramatta', 'Road', 'Auburn', 'NSW', '2144', '02 7837 9800', '06:00 - 22:00', '06:00 - 22:00'],
    ['Balgowlah Platinum', -33.79284, 151.26376, 2, 'Shop 67, 197-215', 'Condamine', 'Street', 'Balgowlah', 'NSW', '2093', '1300 55 77 99', '06:00 - 21:30', '06:00 - 21:30'],
    ['Bankstown', -33.931208, 151.02895, 3, 'Unit 1-2, 9', 'Chapel', 'Street', 'South Bankstown', 'NSW', '2200', '02 8707 4700', '06:00 - 22:00', '06:00 - 22:00']
    ['Bayside', -37.954768, 145.03128, 4, '241 - 245', 'Bay', 'Road', 'Highett', 'VIC', '3190', '03 9559 7400', '06:00 - 22:00', '06:00 - 22:00']
];

function setMarkers(map, locations) {
    var image = {
        url: 'assets/img/icon_pin.png',
        size: new google.maps.Size(40, 52),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(26, 20)
    };

    var shape = {
        coord: [1, 1, 1, 52, 40, 52, 40 , 1],
        type: 'poly'
    };
    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            shape: shape
        });

        var contentString = '<div class="siteNotice"><h4>'+beach[0]+'</h4><p>'+beach[4]+' '+beach[5]+' '+beach[6]+' '+beach[7]+', '+beach[8]+', '+beach[9]+'</p><p><strong>Contact:</strong> '+beach[10]+'</p><p><strong>Opening Hours:</strong><br><span>Monday:</span> '+beach[11]+'<br><span>Tuesday:</span> '+beach[11]+'<br><span>Wednesday:</span> '+beach[11]+'<br><span>Thursday</span>: '+beach[11]+'<br><span>Friday:</span> '+beach[11]+'<br><span>Saturday</span>: '+beach[11]+'<br><span>Sunday:</span> '+beach[11]+'</p></div>';                

        google.maps.event.addListener(marker, "click", function () {

            infowindow.setContent(contentString);
            infowindow.open(map, this);
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

I had to create an array of info markers to hold the data.

var markers = [];
function addMapLocation(map, lat, long, title, message) {
    var locationLatLong = new google.maps.LatLng(lat, long);
    var locationMarker = new google.maps.Marker({ position: locationLatLong, map: map, title: title.trim() });

    attachMessage(locationMarker, message);
    markers.push(locationMarker);
}
function attachMessage(marker, message) {
    var locationInfo = new google.maps.InfoWindow({ content: message });

    google.maps.event.addListener(marker, 'click', function () { locationInfo.open(marker.get('map'), marker); });
}