Google map infowindow position on custom marker

Question

I'm not using the Markers in Google Maps because I wish to render custom text and images on my marker, so what I did is a custom marker using Overlays.

The Overlay position is not exactly like the marker so I played a bit with it and now it is rendering exactly like a marker.

The problem now is the infowindow because it doesn't open on top of the overlay but exactly on the position of the overlay, I wish it to be on top of it, around 32px less on the top position.

Looking at the documentation it looks like the infowindow position is related to the object and on the LatLng, so how can I move it?

Here is the code I'm using:

var marker;
marker = new CustomMarker(markerPosition, map, {}); // custom marker is a class I wrote to prototype the overlay.

google.maps.event.addListener(marker, 'click', function() {
    myInfowindow.open(map, marker);
}); 

Quite simple but unfortunately the infowindow is over the marker and not on top of it like if I use a marker.

Answer 1

Set the pixelOffset of the InfoWindow appropriately:

From the documentation on InfoWindows

pixelOffset | Type:Size | The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened with an anchor, the pixelOffset will be calculated from the anchor's anchorPoint property.