Position Gmaps infowindow in order to not make the map pan

I want to change the current behaviour of my Google Map, so that it display's the infowindow on mouseover and open's a certain link onclick. Displaying the infowindow is not a problem, but the issue now is that the mapcenter will change if the infowindow doesn't fit in the current div; which means the marker position will change and it is not 'mouseover' anymore and the infowindow disappears.

I'm trying to create similar behavious as on e.g.: http://www.booking.com/city/nl/amsterdam.html?sid=de243c5062b6be49f9a67baa38992974;city=-2140479

imho there are 2 solutions I can think of that would do the trick;

1. calculating the position of the marker and position the infowindow based on that
2. Not letting the map change position when the infowindow is displayed, but this would mean the info window might not be visible in some cases, so not ideal.

In the given example, they don't use google.maps.Marker() to add the markers, but they add div's using own code.

createMarker: function (d, g, n, l, e, m) {
    var i = this.b_map_icons[e];
    var b = (i.height) ? i.height : 20;
    var h = (i.width) ? i.width : 17;
    var f = i.iconAnchor[0];
    var a = (i.zOrder) ? i.zOrder : 20;
    var k = g - i.iconAnchor[1];
    var o = (e == "cluster") ? '<div class="ml-text">' + m + "</div>" : "";
    var c = "display:block;width:" + h + "px;height:" + b + "px;left:" + (d - f) + "px;top:" + k + "开发者_开发技巧px;position:absolute;cursor:pointer;z-index:" + (a + 1) + ";";
    var j = $('<div class="marker marker_type_' + e + '" id="' + n + '" style="' + c + '">' + o + '<img alt="' + l + '" src="' + i.image + '" style="position:absolute;top:0px;left:0px;z-index:12000;" /></div>');
    return j
},

Preferrably I'd position the infowindow based on the marker position so it always displays in the current map, is this possible?

Yup, its very possible just add an eventlistener to the marker:

 google.maps.event.addListener(marker, 'mouseover', function () {
       info.open(map, this.position);
 });

The above is from a solution i have written, but I think you get the pictur :) just use the marker position (this.position)

EDIT:

After looking at your example, it occurs to me that you are not in need of an infowindow at all, you need a custom overlay, which is essentially a DOM element with Coords in it.

Documentation