Edit in JSFiddle

var map = $('#map');

// tabs 切換
$(document).on('click', '.tabs > li > a', function () {
    var obj    = $(this),
        tabs   = $('.tabs'),
        li     = tabs.find('li'),
        parent = obj.closest('li'),
        panel  = $('.tabs-panel'),
        target = obj.attr('href'),
        m      = map.data('tinyMap');

    li.removeClass('selected');
    parent.addClass('selected');

    panel.find('.tabs-content').removeClass('selected');
    $(target).addClass('selected');
            
    // 要解決主要是執行以下兩個動作：
    // 1.觸發 map resize 事件
    google.maps.event.trigger(m.map, 'resize');
    // 2.移動地圖中心
    m.map.panTo(new google.maps.LatLng('25.047924', '121.51708099999996'));
});

map.tinyMap({
    'center': {'x': '25.047924', 'y': '121.51708099999996'},
    'zoom': 14,
    'marker': [
        {'addr': ['25.047924', '121.51708099999996'], 'text': 'Marker'}
    ]
});

<ul class="tabs">
    <li class="selected"><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
</ul>

<div class="tabs-panel">
    <div class="tabs-content selected" id="tab1">
        This tab is empty.
    </div>
    <div class="tabs-content" id="tab2">
        <div id="map"></div>
    </div>
</div>

#map{width: 100%;height:240px}
.tabs {margin:0;padding:0;}
.tabs li{display:inline-block;}
.tabs li a{display:block;width:100%;}
.tabs li.selected a{background:#888;color:#fff}
.tabs-panel .tabs-content{display:none;}
.tabs-panel .tabs-content.selected{display:block;}