Databases
StackOverflow2013
Postsdbo
POWhy doesn't my map render in a jQuery tab?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy doesn't my map render in a jQuery tab?
    text
    copied!<p>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.</p> <p><strong>Issue</strong> <img src="https://i.stack.imgur.com/3Koj7.jpg" alt="Image of map not rendering properly."></p> <p><strong>Javascript of Google Maps</strong></p> <pre><code>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; </code></pre> <p><strong>URL of Jquery Tabs</strong> <a href="http://quickerbook.imobisoft.eu/App_Themes/js/jquery.tabify.js" rel="nofollow noreferrer">http://quickerbook.imobisoft.eu/App_Themes/js/jquery.tabify.js</a></p> <p><strong>HTML of Tabs</strong></p> <pre><code>&lt;ul id="tabs-hd"&gt; &lt;li class="active"&gt;&lt;a href="#tab1"&gt;Tab One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab2"&gt;Tab Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab3"&gt;Tab for Google Map&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tab1"&gt;Content for tab one...&lt;/div&gt; &lt;div id="tab2"&gt;Content for tab two...&lt;/div&gt; &lt;div id="tab3"&gt;&lt;div id="map"&gt;&lt;/div&gt;&lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload