使用 Javascript/JQuery 使用 Ajax 加载 Google Maps API，未正确设置回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19985897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading Google Maps API with Ajax using Javascript/JQuery, Callback not setup correctly
提问by GSimon
I would appreciate some guidance on getting this script to work. The map loads fine but the Callback isn't setup correctly so the page keeps appending the Google maps API script to the document each time the button is clicked.
我希望能得到一些有关让这个脚本工作的指导。地图加载正常，但回调设置不正确，因此每次单击按钮时页面都会将 Google 地图 API 脚本附加到文档中。
I am using JQuery's $.load to add an HTML page (map.html) into a DOM element (a div container).
我正在使用 JQuery 的 $.load 将一个 HTML 页面（map.html）添加到一个 DOM 元素（一个 div 容器）中。
$('.button').click(function() {
$('#mapcontainer').load('/map.html');
});
Here is what map.html is using to load the map, the script I'm using originated from here: https://stackoverflow.com/a/12602845/1607449
这是 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>
Here's another example of a different way to setup a callback for dynamically loading the Google Maps Javascript API: http://www.vijayjoshi.org/2010/01/19/how-to-dynamically-load-the-google-maps-javascript-api-on-demand-loading/This is what I am hoping to accomplish by modifying the script I'm currently using (as opposed to back-engineering a new script).
这是设置用于动态加载 Google Maps Javascript API 的回调的另一个示例：http: //www.vijayjoshi.org/2010/01/19/how-to-dynamically-load-the-google-maps- javascript-api-on-demand-loading/这是我希望通过修改我当前使用的脚本来完成的（而不是对新脚本进行反向工程）。
Thanks.
谢谢。
Edit: Solved the issue, solution posted in response below
编辑：解决了问题，解决方案在下面的回复中发布
回答by GSimon
Figured out a solution, essentially my callback wasn't necessary. Here's what I used:
想出了一个解决方案，基本上我的回调是没有必要的。这是我使用的：
$('.button').click(function() {
$('#mapcontainer').load('/map.html', function () {
initialize();
});
});
and
和
<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>
