Tabbar inside infowindow google maps

I’m trying to initialize a tabbar from HTML inside a infowindow in google maps.
Outside the infowindow the code works fine (on the same page), but inside the infowindow the tabbar doesn’t initialize when it is created. I end up with an infowindow displying me
Content 1
Content 2
Content 3
but without tabs.

var contentString = [
          '<div id="a_tabbar" class="dhtmlxTabBar" imgpath="./dhtmlx/imgs/" style="width:470px; height:190px;"  skinColors="#FCFBFC,#F4F3EE" >'+
          '<div id="a1" name="Tab 1">Content 1</div>'+
          '<div id="a2" name="Tab 2">Content 2</div>'+
          '<div id="a3" name="Tab 3">Content 3</div>'
    ].join('');

infowindow = new google.maps.InfoWindow({content: contentString});

//Add listener to map, to insert new Marker
google.maps.event.addListener(map, "dblclick", function(event) {
    marker = new google.maps.Marker({
          position: event.latLng,
          map: map,
          draggable: true
        });
    map.setCenter(event.latLng);
    map.setZoom(18);

//Create and open infowinwow
    google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
    });
});

Any suggestions how I could solve that

Thanks
Georges

A div with dhtmlxTabBar className can be converted in tree on window load. It seems that in your sample the div is attached after window load. For this reason, you need to use script dhtmlxTabbar/samples/01_initialization/01_init_from_script.html initialization.

I’ve tried the following code, but without success:

//Create and open infowinwow google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); tabbar=new dhtmlXTabBar("a_tabbar","top"); tabbar.setImagePath("./dhtmlx/imgs/"); tabbar.addTab("a1","Tab 1","100px"); tabbar.addTab("a2","Tab 2","100px"); tabbar.addTab("a3","Tab 3","100px"); });
as far as i understand the code, the infowindow is created, so that the apropriate Id’s in the div exist and dhtmlx could create the tabbars?

But as far as I see, this isn’t correct.

Make sure that document.getElementById(“a_tabbar”) returns an object before you are calling
tabbar=new dhtmlXTabBar(“a_tabbar”,“top”);

Thanks, I had to add the following line of code to my script:

google.maps.event.addListener(infowindow, 'domready', function() { addTabbar(); });

So my code looks like this:

[code]//Add listener to map, to insert new Marker
google.maps.event.addListener(map, “click”, function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: true
});
map.setCenter(event.latLng);
map.setZoom(18);

google.maps.event.addListener(infowindow, 'domready', function() {
  addTabbar();
});

google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
});

});[/code]

At the end I put the creation of the tabbar in a new function addTabbar():

function addTabbar() { tabbar=new dhtmlXTabBar("tabbar","top"); tabbar.setImagePath("./dhtmlx/imgs/"); tabbar.addTab("b1","Label1","100px"); tabbar.addTab("b2","Label2","100px"); tabbar.addTab("b3","Label3","100px"); tabbar.setContent("b1","tab1"); tabbar.setContent("b2","tab2"); tabbar.setContent("b3","tab3"); tabbar.setTabActive('b1'); }

Now every thing works fine.
Thanks a lot.

Georges

One problem stays:
only the first infowindow works like supposed. Since I want to reuse the infowindow several times to enter new points and info via tabbed infowindow, it looks like the id of the divs (tab1, tab2 and tab3) can only be used once.
Is the a way to assign tabs to a class identifier class=’'tab1", … instead of id=“tab1” ?
By doing so, the infowindows can be reused since they show the right content of the divs, but they loose the tabbing.

Is the a way to ghet that work properly?

The issue is not clear enough. tabbar.setContent(“b1”,“tab1”); attaches div with is “tab1” into the “b1” tab. You may append this div to another html element if it is needed. However, the tab will be empty in this case.

I had to change the code so that a new tabbed infowindow is created with each new marker that is inserted to the map.

[code]
//Add listener to map, to insert new Marker with infowindow
google.maps.event.addListener(map, “click”, function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: true
});
map.setCenter(event.latLng);
map.setZoom(17);

infowindow = new google.maps.InfoWindow({content: contentString});

google.maps.event.addListener(infowindow, 'domready', function() {
  addTabbar();
});

google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
});

});[/code]

thanks for your reply

Georges