Google maps in bpopup by ajax

Question

I use bpopup plugin for ajax popups. I need display popup with google map. Displaying popup is 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 which append ajax to #BranchBox is simple. There is stuff around google map too. I experimented with sync and async loading map. But both didn't works. Sometime map was loaded but mostly no. Timeout didn't help. Do you have any experiences with append google map to ajax loaded content (even with bpopup) ? Thanks for 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 is included in main layout)
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

1. run the functions immediately, there is no need to wait for an event because the window already has been loaded when the popup opens

2. Don't use the async loader, because it would load the API each time you open the popup(what may result in errors), furthermore it would increase the loading-time of the map inside the popup(it first waits for the ajax-response and then for the API)

3. the maps-API calculates the size of the map-container when you create the Map-instance. When the popup doesn't already have it's final size at this moment you will miss some tiles. Trigger the resize-event of the window to load the tiles when the popup has been loaded(2nd argument of bPopup()). The API triggers the resize-event of the map in this case (where the size of the map will be re-calculated and missing tiles loaded)

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