Question

I’m using tabber.js to add tabs to my InfoWindows, and I use the following code to ensure that the tabs are rendered after the InfoWindow’s DOM is ready:

infowindow.id = marker.markerid;
infowindow.open(map, marker);

google.maps.event.addListener(infowindow, 'domready', function () {
    tabberAutomatic({div: document.getElementById(marker.markerid)});
});

With the Google Maps API, the height of the InfoWindow is automatically calculated from it’s content when the InfoWindow opens, not when the DOM is ready. The result is that the InfoWindow is roughly twice the size that it should be, because the height is basically the sum of the heights of all the content in each tab. When the tabs are rendered, I’m left with lots of whitespace in the InfoWindow.

So what I need to do is force the InfoWindow to recalculate it’s height after the tabs are rendered. Is this possible?

UPDATE: This Fiddle illustrates my issue. How can I force the InfoWindow to properly calculate it’s height in this situation? Explicitly setting a maxHeight or equivalent is not an option, because the contents of the InfoWindow are generated dynamically.

Answer 1

I’ve solved the issue by doing the following:

1. Declared the HTML content in the marker object by using the ‘html:’ property
2. Created an empty overlay prior to setting the real content
3. Updated the Overlay content on click event and initalized the tabberAutomatic afterwards

You can see the live example here:

http://jsfiddle.net/alexcastillo/af6bs/

For multiple markers:

http://jsfiddle.net/alexcastillo/Gk7AM/

Notes:

1. The empty overlay must be created outside of the loop.
2. There is no need to run the tabberAutomatic function on domready event.

Best,