使用Javascript/JQuery使用Ajax加载Google Maps API,回调未正确设置

Question

我希望得到一些关于让这个脚本工作的指导.地图加载正常,但回调未正确设置,因此每次单击按钮时,页面都会将Google Maps API脚本附加到文档中.

我正在使用JQuery的$ .load将HTML页面(map.html)添加到DOM元素(div容器)中.

$('.button').click(function() {
        $('#mapcontainer').load('/map.html');
}); 

以下是map.html用于加载地图的内容,我使用的脚本源自此处:https://stackoverflow.com/a/12602845/1607449

<script>

var gMapsLoaded = false;
window.gMapsCallback = function(){
gMapsLoaded = true;
$(window).trigger('gMapsLoaded');}

window.loadGoogleMaps = function(){
if(gMapsLoaded) return window.gMapsCallback();
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://maps.google.com/maps/api/js?key=KEYGOESHERE&sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function(){

   function initialize(){

var mapOptions = {

  }
};

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

$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});

</script>

<div style="height:400px;width:650px;" id="map_canvas"></div>

以下是设置动态加载Google Maps Javascript API的回调的另一种方法示例:http://www.vijayjoshi.org/2010/01/19/how-to-dynamically-load-the-google-maps- javascript-api-on-demand-loading /这是我希望通过修改我正在使用的脚本来完成的(而不是对新脚本进行反向工程).

谢谢.

编辑:解决了问题,解决方案发布在下面的回复中

Answer 1

想出一个解决方案,基本上我的回调是没有必要的.这是我用过的东西:

$('.button').click(function() {
        $('#mapcontainer').load('/map.html', function () {
       initialize();
   });
}); 

和

<script>
function initialize(){
   var mapOptions = {
           ///Map options go here
     }
   };

   map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}
</script>

<div style="height:400px;width:650px;" id="map_canvas"></div>