multiple markers with url - api

Question

I am using Google Maps API with multiple markers & mouse over & infowindows. It works perfectly. Now I want to add an individual URL for each marker on CLICK. But for some reason, all markers always open the last URL. - What is possibly the problem?
// Define your locations: HTML content for mouseover, the info window content, latitude, longitude, url
var locations = [
['<h8>Brugg</h8>', '<h7>auseinander.</h7>', 47.4867355, 8.2109103, 'http://www.stadtereignisse.ch/dokumentiert/'],
['<h8>Aarau»</h8>', '<h7>Aarau</h7>', 47.391224, 8.038669, 'http://www.stadtereignisse.ch/erlebt/'],
['<h8>Bern</h8>', '<h7>Bern</h7>', 46.947974, 7.447447, 'http://www.stadtereignisse.ch/erwuenscht/']
];
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
/* title: locations[i][0], */
url: "http://www.stadtereignisse.ch/dokumentiert/",
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (Allow each marker to have an info window)
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}

Answer 1

Look at the difference between your click handler and your mouseover handler. One of these creates a closure; the other does not. You need to create a closure for click as well.
However, instead of the complicated technique of a function-that-returns-a-function, there is a cleaner way to do it. Simply move the entire loop body into one function that you call from the loop. Then you won't need the extra complication on the mouseover (or click either).
Also, as #ValLeNain pointed out, you're setting marker.url to a hard coded value instead of a different value for each marker, so I changed that to what looks like the value you want.
Finally, a bit of user experience advice: I do not recommend opening an infowindow on a mouseover. As you have probably noticed, if you open an infowindow for a marker near the top of the visible map, the entire map shifts to bring the infowindow into view. It is confusing and surprising when a mouseover triggers that movement. Infowindows should be opened on a click, not a mouseover. Then if you want to put a link inside the infowindow text you can do that.
I didn't address this issue in the code below, but will leave it for you to sort out.
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
addMarker( locations[i] );
}
function addMarker( location ) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location[2], location[3]),
title: location[0],
url: location[4],
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (Allow each marker to have an info window)
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(location[0]);
infowindow.open(map, marker);
});
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}