如何通过javascript动态添加Google Maps API？
[英]How can I dynamically add the Google Maps API via javascript?
问题描述
I am trying to use the Google Maps API on a page which I can only edit through an external javascript file. 
我想在一个页面上使用Google Maps API，我只能通过外部javascript文件进行编辑。 The problem is, when I try to load the Google Maps API dynamically using getScript, it doesn't load. 问题是，当我尝试使用getScript动态加载Google Maps API时，它无法加载。
Is there any way to load the Google Maps API dynamically? 有没有办法动态加载Google Maps API？
This works: 这有效：
http://jsfiddle.net/2XVKL/2/ http://jsfiddle.net/2XVKL/2/
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function codeAddress() {
new google.maps.Geocoder().geocode({'address':document.getElementById('address').value}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert('worked!');
}
});
}
</script>
<body>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Submit" onclick="codeAddress()">
</body>
But I need it the api to be dynamically loaded using only javascript, like this: 但我需要它只使用javascript动态加载api，如下所示：
http://jsfiddle.net/2XVKL/3/ http://jsfiddle.net/2XVKL/3/
<script>
$("document").ready(function () {
$.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false");
});
function codeAddress() {
new google.maps.Geocoder().geocode({'address':document.getElementById('address').value}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert('worked!');
}
});
}
</script>
<body>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Submit" onclick="codeAddress()">
</body>
Edit: found the solution here - https://gist.github.com/jorgepedret/2432506 编辑：在这里找到解决方案 - https://gist.github.com/jorgepedret/2432506
1 个解决方案
解决方案1
1 2014-01-30 20:35:20
Per Google's instructions , you have to add &callback=initialize to your URL: 根据Google的说明 ，您必须在网址中添加&callback=initialize ：
$.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize");
http://jsfiddle.net/mblase75/dErNs/ http://jsfiddle.net/mblase75/dErNs/
To be completely safe, however, you should use .done() to make your function wait until the .getScript() is complete: 但是，为了完全安全，您应该使用.done()使函数等到.getScript()完成：
$(document).ready(function () {
window.gmap_async = $.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize");
// global Deferred variable
});
function codeAddress() {
window.gmap_async.done(function () {
new google.maps.Geocoder().geocode({
'address': document.getElementById('address').value
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert('worked!');
}
});
});
}
http://jsfiddle.net/mblase75/dErNs/1/ http://jsfiddle.net/mblase75/dErNs/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.