Google Maps InfoBubble pixelOffset (Moving from default position above marker)

Question

I am trying to implement a custom infoBubble that has the box opening to the side of a marker rather than the default position of on top. This has turned out to be harder than e

Answer 1

I've just come across the exact same issue but couldn't find an answer anywhere. Through a little trial and error I worked it out.

You'll be using the Google JS file for "infoBubble". Go into this file and search for...

InfoBubble.prototype.buildDom_ = function() {

For me, this is on line 203 (but that could be the result of previous shuffling and edits).

Within that function you'll see the position "absolute" declaration. On a new line, you can add marginTop, marginRight, marginBottom and marginLeft. This will nudge the bubble from its default position (which is also dependent on the arrow position declaration in your config)...

This is my code tweak in the bubble JS file which positions the bubble over the top of the marker (due to a design feature)...

var bubble = this.bubble_ = document.createElement('DIV');
bubble.style['position'] = 'absolute';
bubble.style['marginTop'] = this.px(21);
bubble.style['marginLeft'] = this.px(1);
bubble.style['zIndex'] = this.baseZIndex_;

Hope that helps.