通過JQuery Load加載谷歌地圖？

Question

在執行流程中，initialize()函數需要出現在代碼中，以允許通過JQuery​​調用加載Google Map v3 API映射。

我此刻的代碼看起來像這樣

$('#maplink').click(function(){ 
    $('.fades').fadeOut('slow'); 
    $('#googleMap').show(); 
    $('#googleMap').load("map.html"); 
    initialize(); 
});` 

然而，這不是初始化AJAX調用後的地圖。

任何幫助，將不勝感激:)

Answer 1

我不是很好用jQuery，但我真的不知道你爲什麼要jQuery來加載地圖。如果你正試圖使地圖加載異步谷歌提供了一種方式https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API除此之外。我不能有太大的幫助。對不起

Answer 2

對google maps的initialize（）調用可以作爲map.html中的腳本添加，然後當jquery包含html時它將執行javascript。

或者，你可以這樣做，您有是負載調用是異步的，因此下面

$('#googleMap').load("map.html",function(){ 
    alert('map is loaded and ready'); 
}); 

問題，當初始化（）被調用你的Ajax負荷可能尚未完成。

Answer 3

這是一個非常古老的問題，但對於任何以此結束的人來說，將.html頁面加載到div不是動態加載Maps API地圖的正確方法。以下是應該如何完成的步驟：

首先，將所有Maps API腳本放在主頁面 - 具有#googleMap div的頁面。或者，如果您想將該腳本本身放入異步加載的文件中，請將其放入.js文件並使用$.getScript()加載。

然後，如果您要異步加載Maps API和地圖以響應按鈕單擊，請使用this asynchronous Maps API example中的代碼。

在該示例頁面，你會不會使用此行：

window.onload = loadScript; 

相反，你會從你的點擊處理程序調用loadScript()功能：

$('#maplink').click(function(){ 
    $('.fades').fadeOut('slow'); 
    $('#googleMap').show(); 
    loadScript(); 
}); 

其中loadScript()是示例中的Maps API加載功能。

實際上，您可以使用$.getScript()加載Maps API - 只需給它使用loadScript()示例函數中使用的URL即可。 loadScript()函數幾乎等同於$.getScript()，除了硬編碼的URL。

當然，您還需要在該示例中更改initialize()函數中的內容以匹配您的頁面。