Why doesn't my map render in a jQuery tab?

Question

If I render a map in a tab which is hidden by default, then navigate to that tab (make it visible), the map does not render properly. But when I refresh the page, the map renders properly.

Issue

Javascript of Google Maps

var map;
function initialize() {
    var latlng = new google.maps.LatLng(serLat, serLang); // - 34.397, 150.644);
    var myOptions = {
        zoom: 10,

        width: 1270,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var marker = new google.maps.Marker
    (
        {
            position: new google.maps.LatLng(serLat, serLang),
            map: map,
            width: 1270,
            title: 'Click'
        }
    );
    //        var infowindow = new google.maps.InfoWindow({
    //            content: cntnt
    //        });
    //        google.maps.event.addListener(marker, 'click', function() {
    //            // Calling the open method of the infoWindow 
    //            infowindow.open(map, marker);
    //        });
}
window.onload = initialize;

URL of Jquery Tabs http://quickerbook.imobisoft.eu/App_Themes/js/jquery.tabify.js

HTML of Tabs

<ul id="tabs-hd">
    <li class="active"><a href="#tab1">Tab One</a></li>
    <li><a href="#tab2">Tab Two</a></li>
    <li><a href="#tab3">Tab for Google Map</a></li>
</ul>

<div id="tab1">Content for tab one...</div>
<div id="tab2">Content for tab two...</div>
<div id="tab3"><div id="map"></div></div>

Answer 1

There are two things you need to do:

1. When you reveal the hidden tab, make sure you properly size the container DIV the map is in.

2. Either wait until that DIV is visible and sized before creating the map in it, or else after the DIV is visible and sized, send a resize message to the map:

google.maps.event.trigger( map, 'resize' );

Answer 2

All I did is added a height in the style of the div element and map started appearing.

<div class="event-details" style="height:500px;" id="map_canvas">

</div>