Here's some code cribbed from a project of mine. Basically add some HTML to the info window text - this can redirect users or call any JS function you want.
var objGlobal = {
map: null,
infos: []
}
function getSpots() {
$.ajax({
url: "ashx/getSpots.ashx",
cache: false,
type: "get",
async: false,
success: function (response) {
drawSpots(response);
}
});
}
function drawSpots(response) {
var jsonData = JSON.parse(response);
var i;
var pos;
var mark;
var html;
var info;
for (i = 0; i < jsonData.spots.length; i++) {
html = '../images/spot.gif';
pos = { lat: jsonData.spots[i].dLat, lng: jsonData.spots[i].dLong }
mark = new google.maps.Marker({
position: pos,
map: objGlobal.map,
title: jsonData.spots[i].sName,
icon: html
})
html = '<p>' + jsonData.spots[i].sName + '</p><p><a class=\"spot\" onclick=\"whatever-you-want\">Click for whatever</a></p>';
info = new google.maps.InfoWindow;
google.maps.event.addListener(mark, 'mouseover', (function (mark, html, info) {
return function () {
closeInfo();
info.setContent(html);
info.open(objGlobal.map, mark);
objGlobal.infos[0] = info;
};
})(mark, html, info));
}
}
function closeInfo() {
if (objGlobal.infos.length > 0) {
objGlobal.infos[0].set("marker", null);
objGlobal.infos[0].close();
objGlobal.infos.length = 0;
}
}
And the JSON is an array of spots, of the form:
{
"spots": [
{
"ID": 31634,
"sName": "Dundee, U.K.",
"dLat": 56.45,
"dLong": -3.03
},
{
"ID": 33463,
"sName": "Leeds Bradford, U.K.",
"dLat": 53.87,
"dLong": -1.66,
}
]
}