Multiple Marker InfoWindow in Google Maps v3 - google-maps-api-3

Question

I've testing this for about 1 hour now. But for some reason I can't make it work, to display another infowindow text for each marker.
Clicking each of them, will open a new infowindow (the old one will be closed which is good), but the text inside the window is always the text I set in the last marker:
function initialize() {
var center = new google.maps.LatLng(51.133333,10.416667);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.photos[i]; i++) {
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng,
title: dataPhoto.infotitle,
map: map,
});
/* Create Info Windows */
var infowindow = new google.maps.InfoWindow({
content: " "
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<h3>'+marker.title+'</h3>'+' Infotext');
infowindow.open(map, this);
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
I've been seeing some solutions around here, but none of them seemed to work properly for me.
I'd really appreciate your help!
See online demo.

Answer 1

You simply have to set the Content to this.title, instead of marker.title
infowindow.setContent('<h3>'+this.title+'</h3>'+' Infotext');
Thanks
dz46

Answer 2

you dont have any way to store the infoWindow.. Look at my code, i use infoBubble library but it should be very similar. This is probably more code than you need, but more the merrier..
/**
* infoBubble Variable
* This variable is globally defined for defaults that are loaded.
*/
var infoBubbles = [];
/**
* array of all of the markers that are on the map
*
* #type {Array}
* #author Mike DeVita
* #copyright 2011 MapIT USA
* #category map_Js
*/
var markersArray = [];
/**
* array of all of the sidebar items for all of the markers on the map
*
* #type {Array}
* #author Mike DeVita
* #copyright 2011 MapIT USA
* #category map_Js
*/
var sidebarHtmlArray = [];
/**
* setPoints(locations)
*
* sets the marker, infoBubble and sidebarItem based on the locations
* that were returned from the JSON query.
*
* #param {array} locations array of all of the points, and their settings/html
*
* #author Mike DeVita
* #author Google Maps API
* #copyright 2011 MapIT USA
* #category map_js
*/
function setPoints(locations){
for (var i = 0; i < locations.length; i++) {
/** #type {array} reassigns locations array to be point, isolates it to the setPoints() function */
var point = locations;
/** #type {google} generates Googles API form of the lat lng passed from var point */
var myLatLng = new google.maps.LatLng(point[i].lat, point[i].lng);
/**
* marker variable, stores all of the information pertaining to a specific marker
* this variable creates the marker, places it on the map and then also sets some
* custom options for the infoBubbles.
*
* #type {google}
*/
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
animation: google.maps.Animation.DROP,
icon: point[i].marker_icon
});
/** push the marker to the markersArray to delete or show the overlays */
markersArray.push(marker);
var sidebarItem = point[i].sidebarHtmlView;
sidebarHtmlArray.push(sidebarItem);
infoBubbles[i] = new InfoBubble({
map: map,
minHeight: point[i].min_height,
maxHeight: point[i].max_height,
minWidth: point[i].min_width,
maxWidth: point[i].max_width,
disableAutoPan: false,
hideCloseButton: false,
arrowPosition: 30,
padding:12
});
var tabs = point[i].tabs;
infoBubbles[i].addTab('Company', point[i].html);
for (var ii = 0; ii < tabs.length; ii++) {
infoBubbles[i].addTab(tabs[ii].tabTitle, tabs[ii].tabContent);
}
/**
* add the listeners for the markerClicks and the sideBarClicks
*
* #type {google}
* #todo eventDomListener does not work yet, this is the click listener of the sidebar item's
*/
google.maps.event.addListener(marker, 'click', handleMarkerClick(marker, i));
}
}
function handleMarkerClick(marker,index) {
return function() {
if (!infoBubbles[index].isOpen()) {
infoBubbles[index].open(map, marker);
}else{
infoBubbles[index].close(map, marker);
}
}
}
/**
* addmarker(location)
*
* adds the marker to the map and pushes the marker
* to the end of the markersArray
*
* #param {google} location LatLng of where the marker should be put
*
* #author Mike DeVita
* #author Google API
* #copyright 2011 MapIT USA
* #category map_js
*/
function addMarker(location, marker_icon){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
icon: marker_icon
});
markersArray.push(marker);
}

Answer 3

Change your code to
var markers = new Array();
var infowindow = new Array();
var map;
function initialize() {
var center = new google.maps.LatLng(51.133333,10.416667);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0, dataPhoto; dataPhoto = data.photos[i]; i++) {
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
markers[i] = new google.maps.Marker({
position: latLng,
title: dataPhoto.infotitle,
map: map,
});
/* Create Info Windows */
infowindow[i] = new google.maps.InfoWindow({
content: " "
});
google.maps.event.addListener(markers[i], 'click', function() {
infowindow[i].setContent('<h3>'+this.title+'</h3>'+' Infotext');
infowindow[i].open(map, this);
});
}
var markerCluster = new MarkerClusterer(map, markers);
}