谷歌通过ajax在bpopup中映射

Question

我将bpopup plugin用于ajax弹出窗口。我需要用谷歌地图显示弹出窗口。显示弹出窗口没有问题。

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();
    }
  });
});

在将ajax附加到#BranchBox的模板中很简单。谷歌地图周围也有东西。我试验了同步和异步加载地图。但两者都不起作用。有时地图已加载，但大多数没有。超时没有帮助。你有任何经验将谷歌地图附加到ajax加载的内容（即使使用bpopup）？谢谢你的建议。

模板

<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. 立即运行这些功能，无需等待事件，因为弹出窗口打开时窗口已经加载

2. 不要使用异步加载器，因为它会在每次打开弹出窗口时加载API（可能导致错误），此外它会增加弹出窗口内地图的加载时间（它首先等待ajax响应，然后等待API）

3. maps-API在您创建Map-instance时计算map-container的大小。当弹出窗口此刻没有最终尺寸时，你会错过一些瓷砖。触发窗口的resize-event以在加载弹出窗口时加载tile（bPopup()的第二个参数）。在这种情况下，API会触发地图的resize-event（其中将重新计算地图的大小并加载缺少的地块）

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