infobubble dynamic content not loading on first marker click about js-info-bubble

[gigmaps]

This issue is directly related to the placement of the domready event trigger in the infobubble.js code.

Unfortunately it's currently located in the updateContent_() function, which is called by open_(), before setMap() is called - which means that domready is fired BEFORE the infoBubble is added to the DOM.

It's not possible to simply add the domready trigger after the setMap() call in the open_() function because setMap() is asynchronous... and the setMap() function doesn't have a specific callback.

However, according to the documentation for OverlayView (which is what is being used by this plugin)
https://developers.google.com/maps/documentation/javascript/reference?csw=1#OverlayView
the setMap() function calls the onAdd() function once AFTER setMap() is called with a valid map

onAdd(): Implement this method to initialize the overlay DOM elements. This method is called once after setMap() is called with a valid map. At this point, panes and projection will have been initialized.

and more simply:

In the onAdd() method, you should create DOM objects and append them as children of the panes.

Therefore we should fire the domready event within the onAdd() function, after the infoBubble is appended to the map panes:

/**
 * On Adding the InfoBubble to a map
 * Implementing the OverlayView interface
 */
InfoBubble.prototype.onAdd = function() {
  if (!this.bubble_) {
    this.buildDom_();
  }

  this.addEvents_();

  var panes = this.getPanes();
  if (panes) {
    panes.floatPane.appendChild(this.bubble_);
    panes.floatShadow.appendChild(this.bubbleShadow_);
  }
  google.maps.event.trigger(this, 'domready');    // infobubble has now been added to DOM so we can fire `domready`
};

PR #13 fixes this issue.

JS Fiddle here with updated code (see line 910 in the javascript window for new domready placement)
http://jsfiddle.net/goredwards/7r96we66/

note that I've added timestamps in the jsfiddle at the old domready call and the correct (updated) domready call - you'll see them in the console.log - it comes to about 20ms on my system (it will vary with computer speed)

• it shows that the old domready was indeed firing prior to the infoBubble being appended to the panes
• this gives an idea of the minimum setTimeout you'd need to put around any functions within a domready call if you want to use the original code without the fix - see http://jsfiddle.net/goredwards/xeL7dxye/