Google Maps - Identical values in all info windows [duplicate] - google-maps

Question

This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 8 years ago.
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); });
}