InfoBubble set anchors / position on the fly

anchors_on_the_fly.diff

@@ -347,6 +347,20 @@ InfoBubble.prototype.setArrowStyle = function(style) {
 InfoBubble.prototype['setArrowStyle'] =
     InfoBubble.prototype.setArrowStyle;
 
+InfoBubble.prototype.setAnchor = function(anchor) {
+  if (anchor) {
+    this.set('anchor', anchor);
+    this.bindTo('anchorPoint', anchor);
+    this.bindTo('position', anchor);
+  } else if (this.get('anchor')) {
+    this.set('anchor', null);
+    this.unbind('anchorPoint');
+    this.unbind('position');
+  }
+};
+InfoBubble.prototype['setAnchor'] =
+    InfoBubble.prototype.setAnchor;
+
 
 /**
  * Arrow style changed MVC callback
@@ -976,19 +990,12 @@ InfoBubble.prototype['close'] = InfoBubble.prototype.close;
  * Open the InfoBubble
  *
  * @param {google.maps.Map=} opt_map Optional map to open on.
- * @param {google.maps.MVCObject=} opt_anchor Optional anchor to position at.
  */
-InfoBubble.prototype.open = function(opt_map, opt_anchor) {
+InfoBubble.prototype.open = function(opt_map) {
   if (opt_map) {
     this.setMap(opt_map);
   }
 
-  if (opt_anchor) {
-    this.set('anchor', opt_anchor);
-    this.bindTo('anchorPoint', opt_anchor);
-    this.bindTo('position', opt_anchor);
-  }
-
   // Show the bubble and the show
   this.bubble_.style['display'] = this.bubbleShadow_.style['display'] = '';
   var animation = !!!this.get('disableAnimation');
@@ -1021,6 +1028,7 @@ InfoBubble.prototype['open'] = InfoBubble.prototype.open;
  */
 InfoBubble.prototype.setPosition = function(position) {
   if (position) {
+    this.setAnchor(null);
     this.set('position', position);
   }
 };

usage.md

InfoBubble set anchors / position on the fly

Say you have a map with one InfoBubble as your overlay for markers and other things. I didn't want to initialize one InfoBubble for each marker and position on the map, because I only want to display one InfoBubble at a time.

So I initialize a new InfoBubble:

var infoBubble = new InfoBubble({
  borderRadius: 0,
  width: 350,
  height: 200
}),

Somewhere else in the code I take care about opening and exchanging the content:

infoBubble.setContent('<p>foo</p>');

if (marker) { // When I have a marker I want to place the bubble above the marker
  infoBubble.setAnchor(item.marker);
  infoBubble.setArrowSize(15);
} else { // otherwise just reposition the InfoBubble
  infoBubble.setPosition(item.position);
  infoBubble.setArrowSize(0); // I don't want have an arrow if the item has no corresponding marker
}
if (!infoBubble.isOpen()) { // unless the InfoBubble is open, we open it
  infoBubble.open(map);
}

Please consider integrating this.

Have a look at the diff here

Issue 109 on google-maps-utility-library-v3 Google Project