Linking my contentstring to data in js file

I have just finished a map and want the contentstring to get data from my js file to add into infobox of markers. I had it working under a simple infoBubble.setContent('<b>'+data.description+'</b>'+'<br>'+data.name); query. But now I have created tabs and require each one to read different data from the map.js file.

My code so far:

window.onload = function () {

    // Creating a new map
    var map = new google.maps.Map(document.getElementById("map"), {
            center : new google.maps.LatLng(51.50746, -0.127594),
            zoom : 10,
            mapTypeId : google.maps.MapTypeId.ROADMAP
            });

    var contentString = '<div id="content">'+
    '<h1>'+'</h1>'+
    '<p><b>Test</b>'
    '</div>';

    var contentString2 = '<div id="content">'+
    '<h1>Info</h1>'+
    '<p><b>Info</b>'
    '</div>';

    var contentString3 = '<div id="content">'+
    '<h1>More</h1>'+
    '<p><b>More</b>'
    '</div>';                   

            // Creating a global infoBox object that will be reused by all markers
    infoBubble = new InfoBubble({
      minWidth: 300,
      maxWidth: 300,
      minHeight: 150,
      maxHeight: 350,
      arrowSize: 50,
      arrowPosition: 50,
      arrowStyle: 2,
      borderRadius: 10,
      shadowStyle: 1,
    });

    var div = document.createElement('DIV');
    div.innerHTML = 'test 101';

    infoBubble.addTab('Details', contentString);
    infoBubble.addTab('Info', contentString2);
    infoBubble.addTab('More', contentString3);


    // Custom Markers
    var markers = {};
      var categoryIcons = {
        1 : "images/liver_marker1.png",
        2 : "images/liver_marker2.png",
        3 : "images/liver_marker3.png",
        4 : "images/liver_marker4.png",
        5 : "images/liver_marker5.png",
        6 : "images/liver_marker6.png",
        7 : "images/liver_marker.png"
      }

    // Looping through the JSON data
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        latLng = new google.maps.LatLng(data.latitude, data.longitude);


        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
                position : latLng,
                map : map,
                title : data.title,
                icon : categoryIcons[data.category]
            });

        // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
        (function (marker, data) {

            // Attaching a click event to the current marker
            google.maps.event.addListener(marker, 'click', function(e) {
                //infoBubble.setContent('<b>'+data.description+'</b>'+'<br>'+data.name);
                infoBubble.open(map, marker);
                map.panTo(loc);
});

        })(marker, data);

    }

}

})();
google.maps.event.addDomListener(window, 'load', initialize);
</script>

A sample of my js file:

var json = [{
        "name" : "Acton Street",
        "latitude" : 51.52834,
        "longitude" : -0.118619,
        "description" : "Leaf",
        "category" : 7
    }, {
        "name" : "Aldermans Hill",
        "latitude" : 51.618522,
        "longitude" : -0.11167,
        "description" : "Pod",
        "category" : 7
    }, {
        "name" : "Aldermans Hill",
        "latitude" : 51.618522,
        "longitude" : -0.11167,
        "description" : "Turner",
        "category" : 7
    },{
        "name" : "Alexandra Road/Holloway Street CP",
        "latitude" : 51.469744,
        "longitude" : -0.363063,
        "description" : "Box",
        "category" : 7
    }]

Basically have contentString look for "description" have contentString2 look for "name" and contentString3 look for "latitude" and "longitude"

Would love a heads up on this one.

Cheers

Have you tried updateTab?

//update the first tab content
infoBubble.updateTab(0, 'Details', 'new content');

Have a look at some examples http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/

Also note that the id property must be unique. As it is right now, all your content divs have the same id.