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>