Google Maps: openInfoWindowTabsHtml + GDownloadUrl (Ajax call) question

Question

I am facing the following problem. On an Google Map I want to add info windows with tabs, where content is loaded from an external file using the GDownloadUrl method. The code works about fine, but with two problems. a) The first time I click on a marker, nothing hapens. I need to click twice to get an info box. After that it works ok. b) When I close an info box and open it again, the tabs repeat themselves. Every time I reopen the info box, those tabs get repeated. So, if using the code below and open the info box 3 times, I get 6 tabs (Info, Photos, Info, Photos, Info, Photos). Any idea of what I am doing wrong here?

I have also tried this with JQuery's $.get method, but the results are exactly the same.

function createREMarker(lat,long,reID)
{
    var reMarker = new GMarker(rePoint,iconRE);
    GEvent.addListener(reMarker, "click", function()
    {
        GDownloadUrl('testcontent.php?reID='+reID+'&what=info', function(data) {
            content1 = data;
        });
        GDownloadUrl('testcontent.php?reID='+reID+'&what=photos', function(data) {
            content2 = data;
        });
        tabs.push(new GInfoWindowTab('Info', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content1+'</div>'));
        tabs.push(new GInfoWindowTab('Photos', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content2+'</div>'));
        reMarker.openInfoWindowTabsHtml(tabs);
    });
    return reMarker;
};

Answer 1

Firstly you are using v2 of the API which is now officially deprecated. For a site I maintain I do the following (this is v3 of the API and uses jQuery):

function createMarker(point, id, markerOptions) {
    var marker = new google.maps.Marker(point,markerOptions);
    var Lat = point.lat();
    var Lng = point.lng();

    google.maps.Event.addListener(marker, "click", function() {
        $.ajax({
            type: "GET",
            url: "/data/specific.xml?id=" + id,
            dataType: "xml",
            success: function(xml) {
               var this_marker = $(xml).find('marker');
               var name = $(this_marker).attr("name");
               details_tab = details_tab + "ID: " + id + "<br />Name: " + name + "<br />";
               var infowindow = new google.maps.InfoWindow({
                   content: details_tab,
               });
               infowindow.open(map, marker);
            }
        });
    }
    return marker;
}

From what I can see tabs are no longer supported in v3 of the API? :( But this example uses tabs from jQuery UI:

http://gmaps-samples-v3.googlecode.com/svn-history/r78/trunk/infowindow/tabs.html

http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/infowindow/tabs.html?r=78