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.