jquery - Google maps in bpopup by ajax -

i use bpopup plugin ajax popups. need display popup google map. displaying popup without problem.

js

$(document).on('click', '.aboutbranch', function(e){   e.preventdefault();   $.ajax({     type: 'post',     url: '/ajax/show-branch',     data: {delivery_id: ..., branch_id: ...},     success: function(html) {       $('#branchbox').html(html);       $('#branchbox').bpopup();     }   }); }); 

in template append ajax #branchbox simple. there stuff around google map too. experimented sync , async loading map. both didn't works. sometime map loaded no. timeout didn't help. have experiences append google map ajax loaded content (even bpopup) ? advice.

template

<div id="map_canvas" style="width: 100%; height: 400px;"></div>  <script type="text/javascript">   function initialize() {     var mapoptions = {       center: { lat: parsefloat(latfromphp), lng: parsefloat(lngfromphp)},       zoom: 15     };      var map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions);      var marker = new google.maps.marker({       position: new google.maps.latlng(parsefloat(latfromphp), parsefloat(lngfromphp)),       title: titlefromphp     });      marker.setmap(map);   }    //async load   function loadscript() {     var script = document.createelement('script');     script.type = 'text/javascript';     script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize';     document.body.appendchild(script);   }    window.onload = loadscript;     //sync load (googleapis included in main layout)   google.maps.event.adddomlistener(window, 'load', initialize); </script> 

1. run functions immediately, there no need wait event because window has been loaded when popup opens

2. don't use async loader, because load api each time open popup(what may result in errors), furthermore increase loading-time of map inside popup(it first waits ajax-response , api)

3. the maps-api calculates size of map-container when create map-instance. when popup doesn't have it's final size @ moment miss tiles. trigger resize-event of window load tiles when popup has been loaded(2nd argument of bpopup()). api triggers resize-event of map in case (where size of map re-calculated , missing tiles loaded)

   $('#branchbox')  .bpopup({},function(){google.maps.event.trigger(window,'resize',‌​{});});