Google Map is not working in my responsive tab - html

Question

My Google map is not working
I used this tab view
http://www.petelove.com/responsiveTabs/
My google map init() is:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: <?php echo $lat; ?>, lng: <?php echo $long; ?>},
zoom: 3
});
When i run my google map in first tab it's working fine.
But when i load in second tab. I just get view only. NO MAP DISPLAYING.....

Answer 1

This question has been asked about a thousand times on this website. You should first search before asking again.
The key is that your map is hidden when initialized and therefore, you need to trigger a resize event once the tab has been shown.
google.maps.event.trigger(map, "resize");
Regarding the "tabs" library: choose a library that exposes events. This doesn't seem to be the case (or it is not documented) with the library you choose.
A quick example: Bootstrap tabs
This library exposes events:
Events
When showing a new tab, the events fire in the following order:
hide.bs.tab (on the current active tab)
show.bs.tab (on the to-be-shown tab)
hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)
This way, you have full control over what happens with your tabs. You know when it's shown, hidden, etc.
So you could use something like:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Trigger map resize when tab is shown
google.maps.event.trigger(map, "resize");
});
Edit:
If you need to reset the center, do it here:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Trigger map resize when tab is shown
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $long; ?>));
});

Answer 2

I got this working with just CSS no JS needed:
.tab-content > .tab-pane {
display: block;
height:0;
overflow:hidden;
}
.tab-content > .active {
display: block;
height:auto;
}

Answer 3

Keval, you need to trigger a resize when you display the map.
According to the documentation, you need to trigger a resize event like by
google.maps.event.trigger(map, "resize");
I created a fiddle by adding a tab to the demo page. I used the attrchange jquery plugin to listen to all the changes made to the mapTab, the tab that contains the Google Maps, just to make things simple.
Look at this demo on jsfiddle.
if you take out the listener, the maps would not show unless you click the Resize Map button. Hope this make things clear.