Jquery ui Google地图信息框中的jQuery UI选项卡

在Google地图信息窗口中放置jQuery UI选项卡菜单时，我遇到了一些问题

信息窗口是从基础地图上分层的融合表创建的。我有一个使用“地图信息窗口”的例子，它运行得非常好（但仍需要进行样式设置，数据也不完整）

然而，infowindows有点过于严格，我需要在样式方面有更多的灵活性，所以我转而使用InfoBox.js。谢天谢地，它非常适合，我所要做的就是更换几个选择器，使其匹配。框可以很好地工作，但是jquery选项卡现在根本不能工作。应该在HTML中创建的类属性不是

以下是使用infowindows的原始脚本：

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" /> 
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
    google.load('maps', '3',  {other_params:'sensor=false'});
    google.load('jquery', '1');
    google.load("jqueryui", "1");
</script> 
<script type="text/javascript"> 
  function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 7,
      center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: "col2>>1",
        from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
      },
      styleId: 2,
      map: map,
      suppressInfoWindows: true
    });

    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(layer, 'click', function(e) {

      var childpoverty = e.row['Child poverty rate'].value;
      if (childpoverty > 22) {
        pcolour = '<p style="color: red; font-weight: bold;">';
      } 
      else if (childpoverty > 13) {
        pcolour = '<p style="color: orange; font-weight: bold;">';
      } 
      else {
        pcolour = '<p style="color: green; font-weight: bold;">';
      };

      var sponsored = e.row['Sponsorship'].value;
      if (sponsored == 1) {
       contentString = [
        '<div class="tabs">',
            '<ul>',
                '<li><a href="#tab-1"><span>Sponsor</span></a></li>',
                '<li><a href="#tab-2"><span>Information</span></a></li>',
            '</ul>',
            '<div id="tab-1">',
                '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
                '<img src="' + e.row['Logo'].value + '" width="100"></img>',
            '</div>',
            '<div id="tab-2">',
                '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
                '<p>' + e.row['Political control'].value + '</p>',
                pcolour + e.row['Child poverty rate'].value + '</p>',
                '<p>' + e.row['Unemployment rate'].value + '</p>',
            '</div>',
        '</div>'
      ].join('')}
      else {
        contentString = [
          '<div class="tabs">',
            '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
            '<p>' + e.row['Political control'].value + '</p>',
            pcolour + e.row['Child poverty rate'].value + '</p>',
            '<p>' + e.row['Unemployment rate'].value + '</p>',
          '</div>'
       ].join('')};

      infowindow.setContent(contentString);
      infowindow.setPosition(e.latLng);
      infowindow.open(map);
      $(".tabs").tabs({ selected: 0 });
    });
  }

</script>

load（'maps'，'3'，{其他参数：'sensor=false'}）；
load（'jquery'，'1'）；
加载（“jqueryui”，“1”）；
函数初始化（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：7，
中心：新google.maps.LatLng（52.51112385136416，-3.718475750781187），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var layer=new google.maps.FusionTablesLayer({
查询：{
选择：“col2>>1”，
发件人：“1GBF1TKSGQSHL1KXOLNDGGW52WV8BWYL6NJPCvI”
},
styleId:2，
地图：地图，
suppressInfoWindows：true
});
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（层，'click'，函数（e）{
var childpoverty=e.row[“儿童贫困率]。值；
如果（儿童贫困>22）{
pColor='
；
} 
否则如果（儿童贫困>13）{
pcolour='
；
} 
否则{
pcolour='
；
};
var赞助=e.行[“赞助”]值；
如果（赞助==1）{
contentString=[
'',
“
”，
“
”，
“
”，
“
”，
'',
“
”+e.row['Local authority'].value+”
”，
'',
'',
'',
“
”+e.row['Local authority'].value+”
”，
“”+e.row['Political control'].value+”
”，
pcolour+e.row[“儿童贫困率”]。值+“
”，
“”+e.row[“失业率”].value+“
”，
'',
''
].join（“”）}
否则{
contentString=[
'',
“
”+e.row['Local authority'].value+”
”，
“”+e.row['Political control'].value+”
”，
pcolour+e.row[“儿童贫困率”]。值+“
”，
“”+e.row[“失业率”].value+“
”，
''
].加入（“”）}；
setContent（contentString）；
信息窗口。设置位置（如板条）；
打开（地图）；
$（“.tabs”）.tabs（{selected:0}）；
});
}

这是带有InfowBox的脚本

    <link type="text/css" href="http://code.jquery.com/ui/1.8.12/themes/smoothness/jquery-ui.css" rel="stylesheet" />   
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
    google.load('maps', '3', {other_params:'sensor=false'});
    google.load('jquery', '1');
    google.load("jqueryui", '1');
</script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript"> 

  function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 7,
      center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: "col2>>1",
        from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
      },
      styleId: 2,
      map: map,
      suppressInfoWindows: true
    });

    var ib = new InfoBox();

    google.maps.event.addListener(layer, 'click', function(e) {

      var childpoverty = e.row['Child poverty rate'].value;
      if (childpoverty > 22) {
        pcolour = '<p style="color: red; font-weight: bold;">';
      } 
      else if (childpoverty > 13) {
        pcolour = '<p style="color: orange; font-weight: bold;">';
      } 
      else {
        pcolour = '<p style="color: green; font-weight: bold;">';
      };

      var sponsored = e.row['Sponsorship'].value;     
      if (sponsored == 1) {
        iboxText = [
        '<div class="tabs">',
            '<ul>',
                '<li><a href="#tab-1"><span>Sponsor</span></a></li>',
                '<li><a href="#tab-2"><span>Information</span></a></li>',
            '</ul>',
            '<div id="tab-1">',
                '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
                '<img src="' + e.row['Logo'].value + '" width="100"></img>',
            '</div>',
            '<div id="tab-2">',
                '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
                '<p>' + e.row['Political control'].value + '</p>',
                pcolour + e.row['Child poverty rate'].value + '</p>',
                '<p>' + e.row['Unemployment rate'].value + '</p>',
            '</div>',
        '</div>'
      ].join('')}
      else {
        iboxText = [
          '<div class="tabs">',
            '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
            '<p>' + e.row['Political control'].value + '</p>',
            pcolour + e.row['Child poverty rate'].value + '</p>',
            '<p>' + e.row['Unemployment rate'].value + '</p>',
          '</div>'
       ].join('')};

      var myOptions = {
            disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "white"
              ,opacity: 0.75
              ,width: "280px"
              ,padding: "5px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
      };

      ib.setOptions(myOptions);
      ib.setContent(iboxText);
      ib.setPosition(e.latLng);
      ib.open(map);
      $(".tabs").tabs({ selected: 0 })

    });

  }      

</script>

load（'maps'，'3'，{其他参数：'sensor=false'}）；
load（'jquery'，'1'）；
load（“jqueryui”，“1”）；
函数初始化（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：7，
中心：新google.maps.LatLng（52.51112385136416，-3.718475750781187），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var layer=new google.maps.FusionTablesLayer({
查询：{
选择：“col2>>1”，
发件人：“1GBF1TKSGQSHL1KXOLNDGGW52WV8BWYL6NJPCvI”
},
styleId:2，
地图：地图，
suppressInfoWindows：true
});
var ib=new InfoBox（）；
google.maps.event.addListener（层，'click'，函数（e）{
var childpoverty=e.row[“儿童贫困率]。值；
如果（儿童贫困>22）{
pColor='
；
} 
否则如果（儿童贫困>13）{
pcolour='
；
} 
否则{
pcolour='
；
};
var赞助=e.行[“赞助”]值；
如果（赞助==1）{
iboxText=[
'',
“
”，
“
”，
“
”，
“
”，
'',
“
”+e.row['Local authority'].value+”
”，
'',
'',
'',
“
”+e.row['Local authority'].value+”
”，
“”+e.row['Political control'].value+”
”，
pcolour+e.row[“儿童贫困率”]。值+“
”，
“”+e.row[“失业率”].value+“
”，
'',
''
].join（“”）}
否则{
iboxText=[
'',
“
”+e.row['Local authority'].value+”
”，
“”+e.row['Political control'].value+”
”，
pcolour+e.row[“儿童贫困率”]。值+“
”，
“”+e.row[“失业率”].value+“
”，
''
].加入（“”）}；
变量myOptions={
disableAutoPan:错误
，最大宽度：0
，pixelOffset:new google.maps.Size（-140,0）
，zIndex:null
，boxStyle:{
背景：“白色”
，不透明度：0.75
，宽度：“280px”
，填充：“5px”
}
，closeBoxMargin:“10px 2px 2px 2px”
，closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif"
，infoBoxClearance:newgoogle.maps.Size（1,1）
，isHidden:错
，窗格：“浮动窗格”
，enableEventPropagation:false
};
伊布·塞托蒂
  google.maps.event.addListener(ib,'domready',function(){
    $(".tabs").tabs({ selected: 0 })
  });

google.maps.event.addListener(infoWindow, 'domready', function() {
    jQuery("#tabs").tabs();
});