Why doesn't my map render in a jQuery tab?
google-maps, javascript, jquery
Solution
There are two things you need to do:
When you reveal the hidden tab, make sure you properly size the container DIV the map is in.
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' );`
Problem
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> ```