我将bpopup 插件用于 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>