动态加载Google Maps api的 [英] Dynamically Loading Google Maps api's

问题描述

我试图加载谷歌地图api的动态。
我使用以下代码：

  var head = document.getElementsByTagName（'head'）[0] ; 
 var script = document.createElement（'script'）; 
 script.type ='text / javascript'; 
 script.src ='http://www.google.com/jsapi?key=<MY_KEY>; 
 head.appendChild（script）; 
  

但尝试创建地图时

  map = new GMap2（document.getElementById（map））; 
  

或

  map = new google.maps.Map2（document.getElementById（map））; 
  

我收到的错误是google（或GMap2）未定义。

解决方案

你可以这样做。您可以在url中添加回调函数名称。当API被加载时，它将被调用。这个回调函数必须在文档的范围内可以访问。

我以前通过jQuery触发窗口上的自定义事件，这样做： http://jsfiddle.net/fZqqW/5/

used http://maps.google.com/maps/api/js ？sensor = false& callback = gMapsCallback

  window.gMapsCallback = function（）{
 $ （窗口）.trigger（ 'gMapsLoaded'）; 
} 
 
 $（document）.ready（（function（）{
 function initialize（）{
 var mapOptions = {
 zoom：8， 
 center：new google.maps.LatLng（-34.397，150.644），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 map = new google.maps.Map （document.getElementById（'map_canvas'），mapOptions）; 
} 
函数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（）; 
}）（））; 
  

异步加载API

您可能希望在页面
完成加载或按需加载之后加载Maps API JavaScript代码。为此，您可以注册自己的
标签来响应window.onload事件或函数调用
，但是您需要另外指示Maps JavaScript API
bootstrap来延迟执行您的应用代码，直到Maps
JavaScript API代码完全加载。您可以使用回调
参数，该参数作为参数执行
完成加载API的功能。

以下代码指示应用程序在页面已完全加载（使用window.onload）之后加载Maps API
，并将
Maps JavaScript API写入页面中的标签。另外，
我们指示API仅在
之后执行initialize（）函数，API通过将callback = initialize传递给地图才完全加载

请参阅这里： https://developers.google.com / maps / documentation / javascript / tutorial

Im trying to load the google maps api's dynamically. I'm using the following code:

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.google.com/jsapi?key=<MY_KEY>;
head.appendChild(script);

but when trying to create the map

map = new GMap2(document.getElementById("map"));

or

map = new google.maps.Map2(document.getElementById("map"));

I'm getting an error that google (or GMap2) is undefined.

解决方案

You can do this. You can add a callback function name in the url. It'll be called when the API gets loaded. That callback function must be accessible in the document's scope.

I did that some time ago by triggering a custom event on the window with jQuery: http://jsfiddle.net/fZqqW/5/

used "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"

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

$(document).ready((function(){
    function initialize(){
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            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();
})());​

Asynchronously Loading the API

You may wish to load the Maps API JavaScript code after your page has finished loading, or on demand. To do so, you can inject your own tag in response to a window.onload event or a function call, but you need to additionally instruct the Maps JavaScript API bootstrap to delay execution of your application code until the Maps JavaScript API code is fully loaded. You may do so using the callback parameter, which takes as an argument the function to execute upon completing loading the API.

The following code instructs the application to load the Maps API after the page has fully loaded (using window.onload) and write the Maps JavaScript API into a tag within the page. Additionally, we instruct the API to only execute the initialize() function after the API has fully loaded by passing callback=initialize to the Maps

See HERE : https://developers.google.com/maps/documentation/javascript/tutorial

这篇关于动态加载Google Maps api的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！