How to Display Google Map Inside of a Hidden Div

Are you working on Google Maps? And want to display it in the jQuery tab? Then you will definitely face one problem – Google Map is not working inside of a hidden div. Here we’ll provide the simple solution for that.

Assume that, you have a tabs section and it consists of two tabs, Tab1 and Tab2. Tab1 have some content and Tab2 have Google Map. On the first time page load, Tab1 would be open and Tab2 would be hidden. Now if you click on the Tab2, you’ll see the Google Map is not showing.

To solve this problem you must re-initialize the map in the new tab that was previously hidden. The Google Map would be displayed after you clicked on #Tab2.

$(document).ready(function() {    
    $('#Tab2').click(function(e) {
        initialize();  //Initialize map function
        resetMap(map);
    });
});