Removing title tabs from InfoBubble, Google Maps API v3

Question

I'm working with InfoBubble right now, and I can't seem to get the actual tabs/titles off my InfoBubbles. How do you hide tabs? Just to be clear, I'm referring to just the actual tab at the top of the bubble, not the entire content area.

Is there an example I can look at, or some documentation that covers this?

I assume it must be since the label shown on the InfoBubble wizard is tab free, but I don't see HOW when I look at the source. (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/)

This is my map right now if it matters: http://jsbin.com/ugabaz/3/

Thank you!!!!

Answer 1

The InfoBubbles you are using are designed to use tabs, that is the whole point of them...

Looking at the examples here:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/

I don't see any without tabs, or any way to make one without.

If you simply want an untabbed pop-up then why not use the standard infowindow to display the information? That is what it is for after all.

Anyhow, if you must you could hide the tab in two ways.

Firstly, simply pass an empty string to the tab title parameter. This will stop the text appearing but you will still get a small square.

ie ethiopiaInfoBubble.addTab('', ethiopiaContentString);

Secondly, you could edit the InfoBuble code so that the inline css hides the tab.

Specifically the code that writes the following element...

<div style="float: left; position: relative; cursor: pointer; background-color: rgb(127, 21, 66); border-width: 1px 1px 0px; border-style: solid; border-color: rgb(127, 21, 66); padding: 7.5px 15px 8.5px; margin-right: -15px; white-space: nowrap; border-top-left-radius: 0px; border-top-right-radius: 0px; z-index: 100; display: inline;" class=" _ibani_1563"></div>

Should output simply...

<div style="display: none;" class= " whatever"></div>

Answer 2

With some libraries you could use some css to fix this -- the problem here is that it doesn't give the tab a good name or class or anything to get ahold of via a css selector.

But you can cheat!

ethiopiaInfoBubble.tabsContainer_.style['display'] = 'none'; // like this

Here we are using the infoBubble's own pointer to the dom node for the tab container, and forcing it to be display-none.