One google maps per jquery tab, why is there a offset?

Question

I need an (independent) map on each jQuery Tab. Why does the map in the second tab have the same center as the first one?

Please see my JSFiddle http://jsfiddle.net/metaxos/KQpL6/2/

jQuery(document).ready(function () {
var map1;
var map2;

var myLatlng1 = new google.maps.LatLng(-34.397, 150.644);
var myOptions1 = {
    zoom: 8,
    center: myLatlng1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map1 = new google.maps.Map(document.getElementById("map_1"), myOptions1);

var myLatlng2 = new google.maps.LatLng(-34.397, 150.644);
var myOptions2 = {
    zoom: 8,
    center: myLatlng2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map2 = new google.maps.Map(document.getElementById("map_2"), myOptions2);

var tabs = $( "#tabs" ).tabs({
    activate: function( event, ui ) {
        ui.newTab.index();

        if (ui.newTab.index() == '0') {
            google.maps.event.trigger(map1, 'resize');

        }
        if (ui.newTab.index() == '1') {
            google.maps.event.trigger(map2, 'resize');
        }
    }
    });
});

Answer 1

I'm not entirely sure why but if you change:

var tabs = $( "#tabs" ).tabs({
activate: function( event, ui ) {
    ui.newTab.index();

    if (ui.newTab.index() == '0') {
        google.maps.event.trigger(map1, 'resize');

    }
    if (ui.newTab.index() == '1') {
        google.maps.event.trigger(map2, 'resize');
    }
    }
});

To:

var tabs = $( "#tabs" ).tabs({
activate: function( event, ui ) {
    ui.newTab.index();

    if (ui.newTab.index() == '0') {
        google.maps.event.trigger(map1, 'resize');

    }
    if (ui.newTab.index() == '1') {
        google.maps.event.trigger(map2, 'resize');
        map2.setCenter(myLatlng2);
    }
    }
});

Then everything works as expected. There must be some sort of interaction between the maps but I'm unsure why. I'll look into it. Updated fiddle.