Javascript 通过ajax动态加载内容不会加载gmap

我正在动态地将内容加载到一个页面中，其中一个页面有一个谷歌地图点。除了地图点不显示外，一切正常。MapAPI是异步加载的，所以如果我理解它是正确的，它应该可以工作

来自谷歌官方文档的示例

<script>
function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
}

function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
        'callback=initialize';
    document.body.appendChild(script);
}
</script>

<div class="joomsport-event-location">
    <div class="map" id="map-canvas" style="height: 50%"></div>
    <script>
        loadScript();
        alert('loading'); // test if it's called
    </script>
</div>

函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
}
函数loadScript（）{
var script=document.createElement（'script'）；
script.type='text/javascript'；
script.src=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
'回调=初始化'；
document.body.appendChild（脚本）；
}
loadScript（）；
警报（“加载”）；//测试它是否被调用

---

这是使用jQuery加载到另一个页面的源代码。一旦加载，我就会得到预期的警报。我错过什么了吗？或者甚至不可能完成我要做的事情？

脚本是否会附加到DOM中？（例如，如果您签入Chrome dev tools。）initialize和loadScript函数都会被调用，因此callack正在工作，这意味着必须加载api才能调用我的initialize函数在initialize（）函数中放置一个警报（）（或console.log（））以确保。我已经测试了这一点，工作正常。..joomsport事件位置是否具有高度？如果不是，50%设置为#地图画布将没有任何好处。