html - Google Map is not working in my responsive tab -

my google map not working

i used 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 run google map in first tab it's working fine. when load in second tab. view only. no map displaying.....

this question has been asked thousand times on website. should first search before asking again.

the key map hidden when initialized , therefore, need trigger resize event once tab has been shown.

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

regarding "tabs" library: choose library exposes events. doesn't seem case (or not documented) library choose.

a quick example: bootstrap tabs

this library exposes events:

events

when showing new tab, events fire in following order:

hide.bs.tab (on current active tab)

show.bs.tab (on to-be-shown tab)

hidden.bs.tab (on previous active tab, same 1 hide.bs.tab event)

shown.bs.tab (on newly-active just-shown tab, same 1 show.bs.tab event)

this way, have full control on happens tabs. know when it's shown, hidden, etc.

so use like:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   // trigger map resize when tab shown   google.maps.event.trigger(map, "resize"); }); 

edit:

if need reset center, here:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   // trigger map resize when tab shown   google.maps.event.trigger(map, "resize");   map.setcenter(new google.maps.latlng(<?php echo $lat; ?>, <?php echo $long; ?>)); });