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); };
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); }; });
Comments
Post a Comment