Jquery 通过ajax在bpopup中使用Google地图

我使用ajax弹出窗口。我需要显示谷歌地图弹出窗口。显示弹出窗口是没有问题的

js 在将ajax附加到#BranchBox的模板中很简单。谷歌地图周围也有一些东西。我尝试了同步和异步加载映射。但两者都不起作用。有时会加载映射，但大多数情况下不会。超时没有帮助。您是否有将GoogleMap附加到ajax加载内容的经验（即使使用bpopup）？谢谢你的建议

模板

函数初始化（）{
变量映射选项={
中心：{lat:parseFloat（latFromPhp），lng:parseFloat（lngFromPhp）}，
缩放：15
};
var map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
var marker=new google.maps.marker({
位置：new google.maps.LatLng（parseFloat（latFromPhp）、parseFloat（lngFromPhp）），
标题：titleFromPhp
});
marker.setMap（map）；
}
//异步加载
函数loadScript（）{
var script=document.createElement（'script'）；
script.type='text/javascript'；
script.src=https://maps.googleapis.com/maps/api/js?v=3.exp&“+”回调=初始化“；
document.body.appendChild（脚本）；
}
window.onload=loadScript；
//同步加载（googleapis包含在主布局中）
google.maps.event.addDomListener（窗口“加载”，初始化）；

---

立即运行函数，无需等待事件，因为弹出窗口打开时窗口已加载

不要使用async loader，因为它会在每次打开弹出窗口时加载API（这可能会导致错误），而且还会增加弹出窗口内映射的加载时间（它首先等待ajax响应，然后等待API）

创建地图实例时，“地图API”将计算地图容器的大小。当弹出窗口还没有最终大小时，此时您将错过一些互动程序。加载弹出窗口后，触发窗口的调整大小事件以加载平铺（bPopup（）的第二个参数）。在这种情况下，API触发地图的调整大小事件（地图大小将重新计算并加载缺少的分幅）

---

立即运行这些函数，而不是onload@Dr.Molle。这要好得多，google map总是在加载，但通常不能正确绘制，例如一个矩形。有什么想法吗？试着在bPopUp的回调中触发

window

的resize事件：

$（'#BranchBox'）.bPopUp（{}，function（）{google.maps.event.trigger（window，'resize'，{}）；}）它没有帮助。第二次和更多次opend弹出显示错误在…（a[Wb]）？a[yb]（）：Ja（a，！1）}函数Ge（a）{a.handled=！0；oe（a.bubbles）| Ja（a），“handle…{main，places}.js（第14行，第544列）
$(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();
    }
  });
});

<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>

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