异步加载谷歌地图v3的问题

Question

我现在的加载谷歌地图脚本的解决方案是旧式的方式。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 

但是这需要很长时间并且渲染内容被延迟。然后我看着Google Map Documentation，并发现如何可以异步加载Goole Map javascripts。

所以我测试了这个JavaScript我已经使用。这只是我的脚本的片段。

jQuery(document).ready(function() { 
    googleMaploadScript(); 
    someFunction(); 
} 

// Script for loading googlemap with callback to initialize Google map 
function googleMaploadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.google.com/maps/api/js?sensor=true&callback=initGoogleMap"; 
    document.body.appendChild(script); 
} 

// Some function that calls populateGeoMap() 
function someFunction() { 
(...) 
populateGeoMap(); 
} 

// Script for populating google map with locations 
function populateGeoMap() { 
    // This is where I initialized google map each time I load the page using google map 
    // But since I'm using a callback, I've commented this out. 
    //initGoogleMap(); 
    var lat = '12.142123'; 
    var lng = '54.524522'; 
    latLng = new google.maps.LatLng(lat,lng); <-- THIS FAILS 
} 

// Google map init 
function initGoogleMap() { 
    alert('test'); <-- THIS ALERT IS NEVER TRIGGERED 

    options   = {zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }  
    map    = new google.maps.Map(document.getElementById("map_canvas"), options); 
    geocoder   = new google.maps.Geocoder(); 
    icon    = new google.maps.MarkerImage("http://mysite.com/img/pin_red.png", null, null, null, new google.maps.Size(32, 32));  
    bounds   = new google.maps.LatLngBounds(); 
} 

我的脚本在new google.maps.LatLng(lat,lng);失败，这是因为initGoogleMap()一直没有运行。

似乎script.src的回调不起作用 - 因为我的警报从未被解雇。或者，这可能是因为事情没有按照正确的顺序进行，但仍然应该触发警报。

有没有人有这方面的经验？

Answer 1

这是因为您正尝试初始化您无权访问的对象。尝试将GA功能到document.onready块：

$(function(){ 
    // Script for loading googlemap with callback to initialize Google map 
    function googleMaploadScript() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.google.com/maps/api/js?sensor=true&callback=initGoogleMap"; 
     document.body.appendChild(script); 
    } 

    // Some function that calls populateGeoMap() 
    function someFunction() { 
     (...) 
     populateGeoMap(); 
    } 

    // Script for populating google map with locations 
    function populateGeoMap() { 
     // This is where I initialized google map each time I load the page using google map 
     // But since I'm using a callback, I've commented this out. 
     //initGoogleMap(); 
     var lat = '12.142123'; 
     var lng = '54.524522'; 
     latLng = new google.maps.LatLng(lat,lng); <-- THIS FAILS 
    } 

    // Google map init 
    function initGoogleMap() { 
     alert('test'); <-- THIS ALERT IS NEVER TRIGGERED 

     options   = {zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }  
     map    = new google.maps.Map(document.getElementById("map_canvas"), options); 
     geocoder   = new google.maps.Geocoder(); 
     icon    = new google.maps.MarkerImage("http://mysite.com/img/pin_red.png", null, null, null, new google.maps.Size(32, 32));  
     bounds   = new google.maps.LatLngBounds(); 
    } 

    googleMaploadScript(); 
    someFunction(); 
}); 

Answer 2

我认为发生的事情是，你实际上触发“somefunction”之前加载地图，让JS失败，并没有真正执行“initGoogleMap”。

将您somefunction在initGoogleMap的那样结束：

google.maps.event.addListener(map, 'loaded', function(){ 
somefunction(); 
}); 

ķ

Answer 3

我有同样的问题，算出来是这样的：

的问题是事实， 你无法从jQuery以外的地方获得jQuery对象本身。

末的API回调属性仅拥有全球的JavaScript访问。阅读opn javascript 命名空间以更好地理解。

我的解决方案是建立在$的document.ready的一个全局对象外（函数（）{...

var global = {}; 

下一个，你写的初始化函数你的jQuery块内地图作为变量并将其连接到全局对象：

global.initMap = function(){ ...} 

现在你可以参考你的jQuery函数作为URL查询字符串这样的全局变量：

...&callback=global.initMap 

这为我工作。

Answer 4

蒂姆的建议是优秀的！

这是工作在异步模式（延迟加载）的谷歌地图基于jQuery的谷歌地图插件V3脚本。

这样除了head.js +的jquery.js卡住页面和谷歌地图没有脚本将立即开始是可能加载。应该快速访问 window.load。在ffox 12，ie7,8,9和铬18

测试，由于与ie7,8一些问题，这是不可能的jquery.js异步加载：/

//////////////////// lazy loaded google map 
// load head.js normally before this code. 
// due to IE7,8 or head.js bug you HAVE TO load normally jQuery too: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="/PATH/head.js"></script> 
// load rest of your javascript using head.js function 
head.js("yourscripts.js"); 

// IMPORTANT: google map plugin must be tagged like this: 
head.js({gmap:"YOUR_PATHs/jquery.mapka.v3-rc.js"}); 



var global = {}; 

global.googlemaps_init = function(){ 

    head.ready("gmap", function() { 

    // jquery-ui-map v3 init of google maps (place YOUR jQuery based google maps plugin init here) 
    $('#map_canvas').gmap({ 'center': '42.345573,-71.098326' }); 

    }); // head.gmap.ready END 
} // global.googlemaps_init END 


function loadGmapScript() { 
    var global = {}; 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.googleapis.com/maps/api/js?&sensor=false&callback=global.googlemaps_init"; 
    document.body.appendChild(script); 
} 
window.onload = loadGmapScript; 

//////////////////// lazy loaded google map END 

Answer 5

可以使用异步模式加载谷歌地图API时，您需要提供一个回调函数：

http://maps.googleapis.com/maps/api/js?sensor=true&callback=my_callback_function

这里http://lucamanzo-soluzione-software.it/wp/?p=5你可以找到一个简单的jQuery插件，显示所有使用异步加载和jQuery，构建地图的步骤只有几林代码。使用示例：

$.gmapstools.init(); 
$("#my_map_canvas").gmap({lat:37.4221913, lng:-122.08458530000001, draw_marker:true, zoom_level:13});