google maps api v3 + infoBubble in markerClusterer

Question

I was trying to add an infoBubble to a markerCluster in the 'clusterclick' event but the infoBubble.Open method ask for a 'marker' parameter to bind with. The problem is that a markerCluster is not a google.maps.Point so it's not posible to bind the infoBubble to it.

I assigned the possition of the markerCluster to the infoBubble but the infoBubble redraws in the new position moving the marker from its possition.

Has anyone had the same problem? Is there a solution without modifing the original infoBubble code?

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/

Answer 1

Solution problem 1: The marker parameter was optional If I just simply never assign it, the problem is solved.

Use:

infoBubble.setPossition(latLng);
infoBubble.open(map);

Not:

infoBubble.open(map, marker);

Problem 2: But now the infoBubble appears over the market, is there a way to move it up??

Solution problem 2:

I modified the InfoBubble sourceCode to contain a offsetParameter and then add the pixels in the draw function:

InfoBubble.prototype.PIXEL_OFFSET = 0
...
var top = pos.y - (height + arrowSize); if (anchorHeight) { top -= anchorHeight; } top -= this.PIXEL_OFFSET

Just in case someone had the same problem

Answer 2

Add this to line 93 (beneath the other option fields)

if (options['pixelOffset'] == undefined) {
    options['pixelOffset'] = this.PIXEL_OFFSET_;
}

Around line 182, add this

InfoBubble.prototype.PIXEL_OFFSET_ = [0.0];

Around line 908, add this:

top -= this.get('pixelOffset')[1];  // Add offset Y.
left -= this.get('pixelOffset')[0]; // Add offset X.

Above lines should be placed above:

this.bubble_.style['top'] = this.px(top);
this.bubble_.style['left'] = this.px(left);

---

Now in your construction for options you could do

var popupWindowOptions = {
    backgroundColor: '#2B2B2B',
    arrowStyle: 0,
    pixelOffset: [0,16]
 };

 this.popupWindow = new InfoBubble(popupWindowOptions);