Google Map InfoBox中的jQuery UI选项卡

我在将jQuery UI选项卡菜单放入Google Map InfoWindow时遇到了一些问题。

信息窗口是根据基础表上分层的Fusion Table创建的。我有一个使用Maps信息窗口的示例，该窗口运行良好（尽管样式仍然需要完成，但是数据不完整）

但是，信息窗口的限制性太强了，在样式方面我需要更大的灵活性，因此我改用了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>

这是带有信息框的脚本

    <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>

就像我说的，几乎完全一样，除了第二个之外，没有制表符。

我实在太困了，任何帮助将不胜感激。