Javascript 使用ajax动态加载谷歌地图v3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3922764/
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
Load google maps v3 dynamically with ajax
提问by ZiTAL
When i try to load google maps v3 with ajax the result is:
当我尝试使用 ajax 加载谷歌地图 v3 时，结果是：
<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/2/8a/main.js" type="text/javascript"></script>
in the source code, i suppose that writes with javascript document.write();
在源代码中，我想用 javascript document.write(); 编写；
how i can do this without iframe?
没有 iframe 我怎么能做到这一点？
thanks.
谢谢。
采纳答案by Chris Broadfoot
This is not supported. Please load the API using supported methods:
这不受支持。请使用支持的方法加载 API：
http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Loading_the_Maps_API
http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Loading_the_Maps_API
回答by Armel Larcier
Found a practical way.
找到了一个实用的方法。
Fiddle here with custom event (jQuery): http://jsfiddle.net/fZqqW/94/
在这里摆弄自定义事件（jQuery）：http: //jsfiddle.net/fZqqW/94/
window.gMapsCallback = function(){
$(window).trigger('gMapsLoaded');
}
$(document).ready((function(){
function initialize(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.3239, 5.0428),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}
function loadGoogleMaps(){
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
$(window).bind('gMapsLoaded', initialize);
loadGoogleMaps();
})());?
EDITThe loadGoogleMapsfunction might be more practical if declared in the global scope, especially when working in an ajax application. And a boolean check will prevent loading the api multiple times because of navigation.
编辑loadGoogleMaps如果在全局范围内声明
该函数可能更实用，尤其是在 ajax 应用程序中工作时。由于导航，布尔检查将阻止多次加载 api。
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?sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
$(document).ready(function(){
function initialize(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.3239, 5.0428),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}
$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});
回答by Myster
I've done it like so... this example uses jQuery and google map v3.x
我已经这样做了......这个例子使用jQuery和谷歌地图v3.x
$.getScript("http://maps.google.com/maps/api/js?sensor=true®ion=nz&async=2&callback=MapApiLoaded", function () {});
function MapApiLoaded() {
//.... put your map setup code here: new google.maps.Map(...) etc
}
回答by borchvm
You must use this parameter 'callback=initialize' in the google maps API script to load with ajax:
您必须在谷歌地图 API 脚本中使用此参数 'callback=initialize' 来加载 ajax：
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
Here is a google maps documentation:
这是谷歌地图文档：
回答by Jan ?afránek
Simple and working solution (using jQuery):
简单且有效的解决方案（使用 jQuery）：
var gMapsLoaded = false;
function loadGoogleMaps() { if(!gMapsLoaded) { $.getScript("https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=GoogleMapsLoaded", function(){}); } else { GoogleMapsLoaded(); } }
function GoogleMapsLoaded() {
gMapsLoaded = true;
// your code here - init map ...
}
paste this in your scripts and then call function loadGoogleMaps();when you need it!
将此粘贴到您的脚本中，然后调用函数loadGoogleMaps(); 当你需要的时候！
回答by Michael Benin
$LAB
.setOptions({AlwaysPreserveOrder:true})
.script("http://maps.google.com/maps/api/js?v=3.exp&sensor=false&async=2")
.script("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/6/main.js")
.script("script.js");
Inside of script.js initialize your map without googles load method for example:
在 script.js 内部初始化你的地图，而不使用 googles load 方法，例如：
Namespace.map = (function(){
var map,
markers = [];
return{
init: function(){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922),
mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
markers.push(marker);
}
};
}());
Inside of script.js:
在 script.js 内部：
Namespace.map.init();
// Don't use: google.maps.event.addDomListener(window, 'load', initialize);
Note: Do not rely on this method as Google changes the name of the second js file. Here is an example from their documentation:
注意：不要依赖此方法，因为 Google 更改了第二个 js 文件的名称。这是他们文档中的一个示例：
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
回答by D_Guidi
I've changed a little bit Myster sample, that looks working well for me
我改变了一点 Myster 样本，看起来对我来说很好用
window.mapapiloaded = function () {
console.log('$.ajax done: use google.maps');
createusinggmaps();
};
$.ajax({
url: 'http://maps.google.com/-maps/api/js?v=3.2&sensor=true®ion=it&async=2&callback=mapapiloaded',
dataType: 'script',
timeout: 30000,
success: function () {
console.log('$.ajax progress: waiting for mapapiloaded callback');
},
error: function () {
console.log('$.ajax fail: use osm instead of google.maps');
createusingosm();
}
});
