Google maps add tabs to markers infowindow

Question

I have done some research into whats out there to give tabs to API v3 and have come up with infobubble as a good looking source for tabbed infowindows. I'm not trying to figure out if I can add a tab later to an already created infobubble. I have several events that are pulled from a database to xml then to java script to put on a map but some share the same location but different dates of other potential markers. Do markers or info windows have IDs that can be iterated through to check to see if the marker for a location already exists for the map? and then if that's the case add a tab to the infobubble/infowindow?

I think infoBubble.addTab(title, content) is the way to do it, but how do I know what marker/infobubble to add it to?

Update (here is the code I have that seems to be freezing chrome):

var location_icon = new google.maps.MarkerImage('../images/FAFSA_Logo_icon.png');  
 var map;
 var markersArray= [];
  function load() {

    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(33.961586, -106.008728),
        zoom: 6,
        mapTypeId: 'roadmap'
    });
    var infoBubble = new InfoBubble({maxWidth: 300});


    downloadUrl("../site_parts/mapmysql.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("event_name");
        var address = markers[i].getAttribute("venue_address");
        var city = markers[i].getAttribute("venue_city");
        var state = markers[i].getAttribute("venue_state");
        var zip = markers[i].getAttribute("venue_zip");
        var website = markers[i].getAttribute("venue_website");

        var date = markers[i].getAttribute("event_date");
        var start_time = markers[i].getAttribute("event_start_time");
        var end_time = markers[i].getAttribute("event_end_time");
        var room = markers[i].getAttribute("event_room");
        var cord = markers[i].getAttribute("ec_fname") + " " + markers[i].getAttribute("ec_lname");
        var cord_email = markers[i].getAttribute("ec_email");
        var cord_pnumber = markers[i].getAttribute("ec_pnumber");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("venue_lat")),
            parseFloat(markers[i].getAttribute("venue_lng")));
        var html = "<b>" + name + "</b> <br/>" + address +", "+ city +", "+ state +", "+ zip + "<br/>" +"<b>Date </b> "+ date +"<br/>" +"<b>Time </b> "+ start_time + " - "+ end_time +"<br/>" + "<b>Room </b>" + room + "<br/>"+ "<b> Cordinator </b>" + cord + " " + "<a href='mailto:" + cord_email + "?Subject=FAFSA%20FFA%20Event'>" + cord_email + "</a> " + cord_pnumber;
        var icon =  location_icon;
            for (var i = 0; i < markersArray.length; i++){
                if (markersArray[i].getPosition()=point){
                    addtabFunction(markersArray[i], map, date, html);
                    break;
                } if (i > markersArray.length){continue} else{

            var marker = new google.maps.Marker({map: map, position: point, icon: icon});
                    markersArray.push(marker);
                    bindinfoBubble(marker, map, infoBubble, date, html)
                    break;
                }
            }
        }
    });
  }

function bindinfoBubble(marker, map, infoBubble, date, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoBubble.addTab(date, html)
    infoBubble.open(map, marker);
  });
}

function addtabFunction (marker, map, date, html){
    infoBubble.open(map, marker);
    infoBubble.addTab(date, html);
}

function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

request.onreadystatechange = function() {
    if (request.readyState == 4) {
    request.onreadystatechange = doNothing;
    callback(request, request.status);
    }
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {} 

Answer 1

Assuming the marker is already created, below is what you do.

google.maps.event.addListener(marker, 'click', function() {
      if (!infoBubble.isOpen()) {
        infoBubble.open(map, marker);
      }
});

Source: View the source of this example

Update: I'm a bit lazy to write the code, but below is the idea. Is this what you are looking for?

// declare and initialise an array of {marker: <marker>, ib: <infoBubble>} prior

for(var i=0; i<markerArray.length; i++ ) {
    if(markerArray[i].marker is already there) {
        markerArray[i].ib.addTab() // or
        markerArray[i].ib.updateTab()
    } else {
        var newMarker = create new marker()
        var newIB = create new inforBubble()

        infoBubble.addTab()
        google.maps.event.addListener(marker, 'click', function() {
            if (!infoBubble.isOpen()) {
            infoBubble.open(map, marker);
        }

        markerArray[i].marker = newMarker
        markerArray[i].ib= newIB
   }
});

Answer 2

I am assuming you will be having an array containing the latlng's to place the markers on the map. So a possible solution for your issue is you can search for an array with existing markers every time you place a marker.

I created another array that stores the markers, later searching this array to see if its position matches while attaching the event listener. See the example below.

Example(not tested)-

var markersArray= [];
for (var i = 0; i < latlngArray.length; i++) { 
   var lat = parseFloat(latlngArray[//some index]);
   var lng = parseFloat(latlngArray[//some index]);
   var pos = new google.maps.LatLng(lat, lng); 
   marker = new google.maps.Marker({ position: pos, map: map });
   markersArray.push(marker);
   if(markersArray[i].getPosition().equals(marker.getPosition()))
   {
     addTab(markersArray[i])
   }
   else
   {
    openBubble(marker);  
   }
}  
function openBubble(currentMarker)                
{
     google.maps.event.addListener(currentMarker, 'click', function() {
       if (!infoBubble.isOpen()) {
       infoBubble.open(map, marker);
       }
     }); 
   }
}
function addTab(existingMarker)
{
     google.maps.event.addListener(existingMarker, 'click', function() {
     infoBubble.addTab(title,content);
     }); 
}