jquery - Google Map inside Bootstrap Accordion -

i trying place google map inside bootstrap accordion.

when put map <div id="mapcanvas"> in second accordion, map not load when open second accordion.

$(document).ready(function() {     $('#map-acc a').click(function (e) {       e.preventdefault();       $(this).collapse('show');       resetmap(map);     }); });  function resetmap(m) {     x = m.getzoom(); alert('infunctin');     c = m.getcenter();     google.maps.event.trigger(m, 'resize');     m.setzoom(x);     m.setcenter(c); };           

codepen link

what doing wrong?

see codepen

this js code work you. created global map variable, because in case not available when call

reset(map); 

js code

var map;  function gmap() {     var mapoptions = {         zoom: 12,         center: new google.maps.latlng(13.0827, 80.2707),         maptypeid: google.maps.maptypeid.roadmap     };     map = new google.maps.map(document.getelementbyid('mapcanvas'), mapoptions); } google.maps.event.adddomlistener(window, 'load', gmap);  $(document).ready(function() {     $('#map-acc a').click(function (e) {       e.preventdefault();       $(this).collapse('show');       resetmap(map);       });                 function resetmap(m) {         x = m.getzoom();          c = m.getcenter();         google.maps.event.trigger(m, 'resize');         m.setzoom(x);         m.setcenter(c);     }; });