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);
});
});
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?
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.
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.