Why is my map not showing in jQuery tab?

Question

If I display the map on a tab that is hidden by default, go to this tab (make it visible), the map will not display correctly. But when I refresh the page, the map is displayed correctly.

Question

Javascript 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; 

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

HTML 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

You need to do two things:

• When you open the hidden tab, make sure that you correctly placed the DIV container in which the map is located.

• Wait until the DIV is visible and measured before creating a map in it, otherwise after the DIV is visible and size, send a message with the resizing message to the card:

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

Answer 2

All I did is add height in the style of the div element and the map starts to display.

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

Answer 3

Hi, I have the same problem as the mast to click on your Tab button, and then you have to call initialize() ; see what i do, i set this function for every click tab attribute

 function ChangeTabs(e){ $('#tabs-1').hide(); $('#tabs-2').hide(); $('#tabs-3').hide(); $('#tabs-4').hide(); var a = $.browser; if (a.msie) { $(e.srcElement.hash).show(); if(e.srcElement.hash=='#tabs-3') initialize(); } else { $(e.currentTarget.hash).show(); if(e.currentTarget.hash=="#tabs-3") initialize(); }