加載腳本的時間/順序

Question

我正在使用Google地圖，我有一個問題涉及到時間安排問題，我想......特別是何時加載Google地圖API腳本的問題。

我越來越：

Uncaught ReferenceError: google is not defined 

不過，如果我看在控制檯中谷歌的對象，它顯示了就好了。

在嘗試使用API​​之前API的腳本尚未完全加載嗎？

此外，我有這個主要腳本（下面）加載'延期'屬性，但我不認爲這應該是一個問題。

我錯過了什麼？

在此先感謝。

var inrMap = { 
    map : null, 
    markers : [], 

    addCoords : function(){ 
     var regex1 = /\s/; 
     var regex2 = /\./; 
     for(var i in inrMap.locations){ 
      var address = inrMap.locations[i].address; 
      address = address.replace(regex1, '+'); 
      address = address.replace(regex2, ''); 
      $.ajax({ 
       data : 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=false', 
       dataType : 'json', 
       type : 'get', 
       success : function(data, textStatus, xhr){ 
        inrMap.locations[i].lat = data.geometry.location.lat; 
        inrMap.locations[i].lng = data.geometry.location.lng; 
       }, 
       error : function(xhr, textStatus, errorThrown){ 
        //console.error('problem with geocoding service...'); 
       } 
      });  
     } 
    }, 

    generateMap : function(){ 
     var map_options = { center : new google.maps.LatLng(-34.397, 150.644), zoom : 8, mapTypeId : google.maps.MapTypeId.ROADMAP }; 
     inrMap.map = new google.maps.Map(document.getElementById("map_canvas"), map_options); 
     //load markers 
     for(var i in inrMap.locations){ 
      var position = new google.maps.LatLng(inrMap.locations[i].lat, inrMap.locations[i].lng); 
      inrMap.markers[i] = new google.maps.marker(position, inrMap.locations[i].title);   
      inrMap.markers[i].setMap({ map : inrMap.map, draggable : false, animation : google.maps.Animation.DROP }); 
     } 
    }, 

    bindMarkers : function(){ 
     // $(inrMap.markers).each(function(){ 
     // this.bind('click', function(){ 
     //  //create new info window 
     //  var location_name = this.id; // ***** this needs to be fixed ****** 
     //  var iw = new google.maps.InfoWindow({ content : this.id.title, maxWidth : '300' }); 
     // }) 
     // }); 
    }, 

    bindForm : function(){ 

    } 
} 

inrMap.locations = { 
      jacksonville : { 
       title : 'jacksonville', 
       address : '4651 Salisbury Rd. Suite 170, Jacksonville FL 32256', 
       phone : '(904) 398-0155', 
       link : '/location/florida-regional-office', 
       marker : null 
      }, 
      miami : { 
       title : 'Miami', 
       address : '15050 NW 79 Court Suite 104, Miami Lakes FL 33016', 
       phone : '(305) 403-0594', 
       link : '/location/florida-regional-office', 
       marker : null 
      } 

etc... 




} 

//load google maps js 
var gmaps_script = document.createElement('script'); 
gmaps_script.type = 'text/javascript'; 
gmaps_script.src = 'http://maps.googleapis.com/maps/api/js?key=*****&sensor=false'; 
$('body').append(gmaps_script); 

$(function(){ 

for(var i = 0; i < 4000; i++){ 
    var foo = Math.sin(i); 
} 

//check if locations object is not in local storage (and thus does not have coordinates) 
if(!localStorage.getItem('inr_locations')){ 
    //get lat & long, add to locations obj 
    inrMap.addCoords(); 
    //save object 
    //localStorage.setItem('inr_locations', inrMap.locations); 
} 
else{ 
    //pull locations object from local storage 
    //inrMap.locations = localStorage.getItem('inrMap.locations'); 
} 

//create element to place map in 
var map_canvas = document.createElement('div'); 
$(map_canvas).attr('id', 'map_canvas').appendTo('#content'); 

//generate map 
inrMap.generateMap(); 

//bind events to map markers 
//inrMap.bindMarkers(); 

//bind events to form/links 
//inrMap.bindForm(); 

}); 

Answer 1

對於API的腳本尚未完全加載尚未之前，我嘗試 使用它？

是的，就是這個問題。

相反的：

var gmaps_script = document.createElement('script'); 
gmaps_script.type = 'text/javascript'; 
gmaps_script.src = 'http://maps.googleapis.com/maps/api/js?key=*****&sensor=false'; 
$('body').append(gmaps_script); 

使用jQuery.getScript()和嘗試是這樣的：

//Temporary creating global function,for handling loading of the Google Maps Library 
window.__googlemapscallback = function(){ 
    delete window.__googlemapscallback; 

    //do your map initialization here 
}; 

$.getScript('http://maps.googleapis.com/maps/api/js?key=*****&sensor=false&&callback=__googlemapscallback'); 

裝載Google Maps V3 API的主要問題是，腳本加載partially.By http://maps.googleapis.com/maps/api/js?key=*****&sensor=false網址，您加載該庫的第一個塊，然後加載其他塊。所有塊完全加載後，庫調用URL中提供的callback函數。