異步顯示多個谷歌地圖

我目前有一個頁面顯示結果的搜索。當用戶點擊結果時，詳細信息使用ajax獲取並加載到頁面中。在這些細節中，有一個谷歌地圖。異步顯示多個谷歌地圖

以前，我在細節頁面中有回調的Gmaps腳本。但是我遇到了這個問題，即如果用戶點擊了幾個結果，Gmaps腳本會被多次插入。

現在，我在結果頁面中加載腳本，並在傳遞所有必要參數的同時詳細信息頁面調用初始化函數。但是我得到一個undefined is not a function錯誤。

所以我的問題是：如何構建Gmaps腳本，回調和兩個頁面（結果和細節）之間的映射的異步初始化？

結果頁面

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=[key]"></script> 

function initialize(params) { 
var directionsService, directionsDisplay, map; 

directionsService = new google.maps.DirectionsService(); 
directionsDisplay = new google.maps.DirectionsRenderer(); 

// your typical gmaps stuff 

}

詳情頁

<div id="map_canvas"></div> 

initialize(params);

來源

2013-01-18 greener

可能重複[異步谷歌地圖API V3不確定是不是一個函數（http://stackoverflow.com/questions/14184956/async-google-maps-api-v3- undefined-is-not-a-function） –

加載一張地圖不是問題（通過添加回調）。我不確定的是如何重複使用gmaps的'callback'，而不會出現「您已經在此頁面上多次包含Google Maps API」的錯誤。 – greener

檢查是否存在「google.maps」。當它存在時，只需調用初始化，如果沒有，請使用加載器 –

你能看到，如果谷歌地圖的劇本已經通過檢查該被添加了「谷歌」的全局變量已經加載到DOM。

Full jsfiddle example here: http://jsfiddle.net/gavinfoley/yD8Qt/。

// dom ready 
 
    $(function() { 
 
     if (typeof google === "undefined") { 
 
      alert("Lazy loading Google maps"); 
 
      lazyLoadGoogleMaps(); 
 
     } else {     
 
      alert("Google Maps is already loaded"); 
 
      googleMapsLoaded(); 
 
     } 
 
    }); 
 

 
    function lazyLoadGoogleMaps() { 
 
     // Note the callback function name 
 
     $.getScript("http://maps.google.com/maps/api/js?sensor=true&callback=googleMapsLoaded") 
 
     .done(function (script, textStatus) {    
 
      alert("Google maps loaded successfully"); 
 
     }) 
 
     .fail(function (jqxhr, settings, ex) { 
 
      alert("Could not load Google Maps: ", ex); 
 
     }); 
 
    } 
 

 
    // This function name is passed in to the Google maps script load above 
 
    // and will be called once Google maps has loaded 
 
    function googleMapsLoaded() {   
 
     alert("Done!"); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

的

來源

2013-02-02 04:28:18 GFoley83

由於DrMolle的評論，我設法解決它，但您的答案非常好。實際上，感謝您向我介紹'$ .getScript'。 – greener

不用擔心！ '。.getScript'只是'.ajax'的簡寫包裝，但是我喜歡它，因爲它讀取更好/更明顯的你正在做的事情。 – GFoley83

異步顯示多個谷歌地圖

回答

相關問題