Dynamically loading Google Maps API V3 by JQuery

发觉google的一些应用的javascript接口API的的js文件下载有时候会比较慢，会影响网站的加载。好像Google Map API v3的js下载经常都比较慢，影响整体网页的显示效果。所以今天特别研究动态载入javascript文件。网上搜索了一下，无非都是那几个方法。不过我发现JQuery本身就自带一个动态下载javascript文件的函数，无需用一些插件。
jQuery.getScript( url, [callback] ) 官方说明

非常容易加重js文件，1.2版本之后就可以支持跨域下载javascript文件。

于是我就用了动态加载Google Map API v3的javascripte文件。

$.getScript("http://maps.google.com/maps/api/js?sensor=false",function(){
alert("Script loaded and executed.");
});

虽然显示了警告信息”Script loaded and executed.”， 页面变成了空白页面了，真是不解。开始怀疑JQuery的.getScript的问题，于是试了官方的示范例子，并没有问题。于是修改官方例子动态下载google map api的js。同样页面也变成了空白页。

估计应该是google map api v3的api问题，观看了http://maps.google.com/maps/api/js?sensor=false的源代码

window.google = window.google || {};
google.maps = google.maps || {};
(function() {
  
  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }
  
  google.maps.Load = function(apiLoad) {
    apiLoad([,[[["http://mt0.google.com/vt/v=ap.114&hl=zh-CN&","http://mt1.google.com/vt/v=ap.114&hl=zh-CN&","http://mt2.google.com/vt/v=ap.114&hl=zh-CN&","http://mt3.google.com/vt/v=ap.114&hl=zh-CN&"],,"ap.114"],[["http://khm0.google.com/kh/v=49&hl=zh-CN&","http://khm1.google.com/kh/v=49&hl=zh-CN&","http://khm2.google.com/kh/v=49&hl=zh-CN&","http://khm3.google.com/kh/v=49&hl=zh-CN&"],,"49"],[["http://mt0.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt1.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt2.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt3.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&"],,"apt.114"],[["http://mt0.google.com/vt/v=app.114&hl=zh-CN&","http://mt1.google.com/vt/v=app.114&hl=zh-CN&","http://mt2.google.com/vt/v=app.114&hl=zh-CN&","http://mt3.google.com/vt/v=app.114&hl=zh-CN&"],,"app.114"],"fzwq1Ofu9DMOwRrfzS_9mNjD8hXvTS89l593ng",[[,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,10,18,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,10,,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]]]],["zh-CN","US","google.com",,,"http://google.com/maps","http://maps.gstatic.com/intl/zh_cn/mapfiles/","http://gg.google.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a"],[686055407],1], loadScriptTime);
    
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a/main.js");
})();

请看getScript()函数，函数内用了document.write来再次插入javascript文件。就是这里搞到页面空白一片。上网搜索了一下解决方法：
在下班的的两个连接内找到了方法
http://august.lilleaas.net/unobtrusive_google_maps_with_jquery
http://code.google.com/intl/zh-CN/apis/maps/articles/static+js.html

原来需要动态加载google map api的时候需要在请求js文件的时候加回调函数作为参数。请求应该是：http://maps.google.com/maps/api/js?sensor=false&callback=map_init
这样请求的时候返回的javascript与原来的是不同的。请留意下边的代码 getScript的函数不再使用document.write了。而且在javascript下载完成后会自动调用map_init()函数，需要自己写一个map_init()函数

window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    var s = document.createElement('script');

    s.src = src;
    document.body.appendChild(s);
  }

  google.maps.Load = function(apiLoad) {
    apiLoad([,[[["http://mt0.google.com/vt/v=ap.114&hl=zh-CN&","http://mt1.google.com/vt/v=ap.114&hl=zh-CN&","http://mt2.google.com/vt/v=ap.114&hl=zh-CN&","http://mt3.google.com/vt/v=ap.114&hl=zh-CN&"],,"ap.114"],[["http://khm0.google.com/kh/v=49&hl=zh-CN&","http://khm1.google.com/kh/v=49&hl=zh-CN&","http://khm2.google.com/kh/v=49&hl=zh-CN&","http://khm3.google.com/kh/v=49&hl=zh-CN&"],,"49"],[["http://mt0.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt1.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt2.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt3.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&"],,"apt.114"],[["http://mt0.google.com/vt/v=app.114&hl=zh-CN&","http://mt1.google.com/vt/v=app.114&hl=zh-CN&","http://mt2.google.com/vt/v=app.114&hl=zh-CN&","http://mt3.google.com/vt/v=app.114&hl=zh-CN&"],,"app.114"],"fzwq2i5W0_vw_-9fFuwYnxkPJjzoLw6PvDzbBw",[[,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,10,18,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,10,,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]]]],["zh-CN","US","google.com",,,"http://google.com/maps","http://maps.gstatic.com/intl/zh_cn/mapfiles/","http://gg.google.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a"],[4126402443],1], loadScriptTime);

    map_init();
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a/main.js");
})();

这样就可以成功使用$.getScript动态加载google map api V3的javascript了。

function map_init()
{
    alert("Script loaded and executed.");
}
$.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=map_init");