title: Infobubble tabs not resetting when a new marker is clicked
body: <p>I'm using api V3's infobubble with tabs. Everything works great with the first marker, 3 tabs show up with the correct data. then you click another marker and the first markers tabs with the data show up along with the new markers 3 tabs, so you end up with 6 tabs when you click the second marker. When you click the third marker, the window closes and then the new marker infobubble appears with the first 6 tabs and then the new 3 tabs for that marker so you end up with 9 tabs, ect with each new click. Basically, when you click the second marker, the first marker window needs to close and the second marker needs to open with only the 3 tabs for that marker only and not all the other tabs from previously opened markers. I hope this is clear. Here is the entire pages code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"&gt;
  &lt;head&gt; 
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; 
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; 
      &lt;title&gt;Activities&lt;/title&gt; 
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="GoogleMaps/Scripts/downloadxml.js"&gt;&lt;/script&gt;    
  &lt;script type="text/javascript" src="GoogleMaps/Scripts/infobubble_tabs.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  html, body { height: 100%; } 
      .style1
      {
          width: 758px;
      }
      .style2
      {        
          width: 349px;
      }
  #side_bar  
  {
      height: 550px;
      width: 349px;   
      overflow:scroll;
  }
  &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
      //&lt;![CDATA[
          // this variable will collect the html which will eventually be placed in the side_bar 
          var side_bar_html = "";
          var gmarkers = [];
          var gicons = [];
          var map = null;
  
           var InfoBubble = new InfoBubble({
              maxWidth: 300
          });
  
  
  //defines icon if there is none stated
    gicons["red"] = new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png",        
        new google.maps.Size(20, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(9, 9));
          // Marker sizes are expressed as a Size of X,Y
          // where the origin of the image (0,0) is located
          // in the top left of the image.
          // Origins, anchor positions and coordinates of the marker
          // increase in the X direction to the right and in
          // the Y direction down.
  
    var iconImage = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png',
          new google.maps.Size(20, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(9, 9));
          var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',        
        new google.maps.Size(37, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(9, 9));
          // Shapes define the clickable region of the icon.
          // The type defines an HTML &amp;lt;area&amp;gt; element 'poly' which traces out a polygon as a series of X,Y points. The final coordinate closes 
          //the poly by connecting to the first coordinate.
          var iconShape = {
              coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
              type: 'poly'
          };
  
  //determines icon based on category
          //if no icon is defined
          function getMarkerImage(iconColor) {
              if ((typeof (iconColor) == "undefined") || (iconColor == null)) {
                  iconColor = "red";
              }
              if (!gicons[iconColor]) {
                  gicons[iconColor] = new google.maps.MarkerImage(iconColor,
        new google.maps.Size(20, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(9, 9));
              }
              return gicons[iconColor];
          }
  
          function category2icon(category) {
              var color = "red";
              switch (category) {
                  case "Hike": color = "GoogleMaps/Images/HikingIcon.jpg";
                      break;
                  case "Camping": color = "GoogleMaps/Images/camping.gif";
                      break;
                  case "StatePark": color = "GoogleMaps/Images/statepark.jpg";
                      break;
                  case "NationalPark": color = "GoogleMaps/Images/NationalPark_icon.png";
                      break;
                  case "PointsofInterest": color = "GoogleMaps/Images/POI.png";
                      break;
                  default: color = "red";
                      break;
              }
              return color;
          }
  
          gicons["Hike"] = getMarkerImage(category2icon("Hike"));
          gicons["Camping"] = getMarkerImage(category2icon("Camping"));
          gicons["StatePark"] = getMarkerImage(category2icon("StatePark"));
          gicons["NationalPark"] = getMarkerImage(category2icon("NationalPark"));
          gicons["PointsofInterest"] = getMarkerImage(category2icon("PointsofInterest"));
  
  // A function to create the marker and set up the event window
          function createMarker(latlng, name, tab1, tab2, tab3, category) {
              var contentString = tab1;
              var contentString2 = tab2;
              var contentString3 = tab3;
              var marker = new google.maps.Marker({
                  position: latlng,
                  icon: gicons[category],
                  shadow: iconShadow,
                  map: map,
                  title: name,
                  zIndex: Math.round(latlng.lat() * -100000) &lt;&lt; 5
              });
              // === Store the category and name info as a marker properties ===
              marker.mycategory = category;
              marker.myname = name;
              gmarkers.push(marker);
  
  // to open the info bubbles
              google.maps.event.addListener(marker, 'click', function () {
                  InfoBubble.open(map, marker);
                  InfoBubble.addTab('Details', contentString);
                  InfoBubble.addTab('Notes', contentString2);
                  InfoBubble.addTab('Campground Map', contentString3);
              });
          }
  
          // == shows all markers of a particular category, and ensures the checkbox is checked ==
          function show(category) {
              for (var i = 0; i &lt; gmarkers.length; i++) {
                  if (gmarkers[i].mycategory == category) {
                      gmarkers[i].setVisible(true);
                  }
              }
              // == check the checkbox ==
              document.getElementById(category + "box").checked = true;
          }
  
          // == hides all markers of a particular category, and ensures the checkbox is cleared ==
          function hide(category) {
              for (var i = 0; i &lt; gmarkers.length; i++) {
                  if (gmarkers[i].mycategory == category) {
                      gmarkers[i].setVisible(false);
                  }
              }
              // == clear the checkbox ==
              document.getElementById(category + "box").checked = false;
              // == close the info window, in case its open on a marker that we just hid
              InfoBubble.close();
          }
  
          // == a checkbox has been clicked ==
          function boxclick(box, category) {
              if (box.checked) {
                  show(category);
              } else {
                  hide(category);
              }
              // == rebuild the side bar
              makeSidebar();
          }
  
          function myclick(i) {
              google.maps.event.trigger(gmarkers[i], "click");
          }
  
          // == rebuilds the sidebar to match the markers currently displayed ==
          function makeSidebar() {
              var html = "";
              for (var i = 0; i &lt; gmarkers.length; i++) {
                  if (gmarkers[i].getVisible()) {
                      html += '&lt;a href="javascript:myclick(' + i + ')"&gt;' + gmarkers[i].myname + '&lt;\/a&gt;&lt;br&gt;';
                  }
              }
              document.getElementById("side_bar").innerHTML = html;
          }
  
          function initialize() {
              var myOptions = {
                  zoom: 8,
                  center: new google.maps.LatLng(39.364032, -77.182159),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              map = new google.maps.Map(document.getElementById("map"), myOptions);
  
  // Closes any open bubbles before opening new one
              google.maps.event.addListener(map, 'click', function () {                
                  InfoBubble.close();                
              });
  
  //Downloads the data from xml file
              // Reads the data the creates each tab
              downloadUrl("GoogleMaps/categories.xml", function (doc) {
                  var xml = xmlParse(doc);
                  var markers = xml.documentElement.getElementsByTagName("marker");
  
                  for (var i = 0; i &lt; markers.length; i++) {
                      // obtain the attribues of each marker
                      var lat = parseFloat(markers[i].getAttribute("lat"));
                      var lng = parseFloat(markers[i].getAttribute("lng"));
                      var point = new google.maps.LatLng(lat, lng);
                      var address = markers[i].getAttribute("address");
                      var city = markers[i].getAttribute("city");
                      var state = markers[i].getAttribute("state");
                      var zip = markers[i].getAttribute("zip");
                      var name = markers[i].getAttribute("name");
                      var notes = markers[i].getAttribute("notes");
                      var url = markers[i].getAttribute("url");
                      var image = markers[i].getAttribute("image");
                      var tab1 = "";
                      tab1 += "&lt;b&gt;" + name + "&lt;\/b&gt;&lt;p&gt;";
                      tab1 += address + "&lt;/br&gt;";
                      tab1 += city + ", " + state + " " + zip + "&lt;/br&gt;";
                      tab1 += '&lt;br&gt;&lt;src="_blank" href="'+url+'"&gt;'+url+'&lt;/a&gt;' + "&lt;/br&gt;";                    
                      var tab2 = notes;
                      var tab3 = "";
                      tab3 += '&lt;img src="'+image+'"&gt;' + "&lt;/br&gt;"; 
                      tab3 += "Or online at:";
                      tab3 += '&lt;br&gt;&lt;a target="_blank" href="'+image+'"&gt;'+image+'&lt;/a&gt;' + "&lt;/br&gt;"; 
                      var category = markers[i].getAttribute("category");
                      // create the marker
                      var marker = createMarker(point, name, tab1, tab2, tab3, category);
                  }
  
                  // == show or hide the categories initially ==
                  show("Hike");
                  hide("Camping");
                  hide("StatePark");
                  hide("NationalPark");
                  hide("PointsofInterest");
                  // == create the initial sidebar ==
                  makeSidebar();
              });
          }
  
  
      //]]&gt;
      &lt;/script&gt;
    &lt;/head&gt;
  &lt;body style="margin:0px; padding:0px;" onload="initialize()"&gt; 
      &lt;table border="1" &gt;
        &lt;tr&gt;
          &lt;td class="style1"&gt;
             &lt;div id="map" style="width:978px; height: 596px"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td valign="top" style="text-decoration: underline; color: #4444ff;" 
                class="style2"&gt; 
             &lt;div id="side_bar"&gt;&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;form action="#"&gt;
        Hiking: &lt;input type="checkbox" id="Hikebox" onclick="boxclick(this,'Hike')" /&gt; &amp;nbsp;&amp;nbsp;
        Camping: &lt;input type="checkbox" id="Campingbox" onclick="boxclick(this,'Camping')" /&gt; &amp;nbsp;&amp;nbsp;
        State Parks: &lt;input type="checkbox" id="StateParkbox" onclick="boxclick(this,'StatePark')" /&gt;&amp;nbsp;&amp;nbsp;
        National Parks: &lt;input type="checkbox" id="NationalParkbox" onclick="boxclick(this,'NationalPark')" /&gt;&amp;nbsp;&amp;nbsp;      
        Points of Interest: &lt;input type="checkbox" id="PointsofInterestbox" onclick="boxclick(this,'PointsofInterest')" /&gt; &amp;nbsp;&amp;nbsp;
        &lt;br /&gt;
      &lt;/form&gt;  
  
  
  
  
      &lt;noscript&gt;&lt;b&gt;JavaScript must be enabled in order for you to use Google Maps.&lt;/b&gt; 
        However, it seems JavaScript is either disabled or not supported by your browser. 
        To view Google Maps, enable JavaScript by changing your browser options, and then 
        try again.
      &lt;/noscript&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>