谷歌地圖不顯示在文件中調用網頁

我正在一個網站有一個頁腳，其中包含一個谷歌地圖。在首頁的頁腳編碼的頁面上，並顯示就好了：http://www.clickityclick.me/morehampton/index.html 谷歌地圖不顯示在文件中調用網頁

然而，在所有其他網頁使用jQuery這樣我打電話頁腳從外部文件：

<script> 
    $(function(){ 
     $('#header').load('header_contact.html') 
     $('#fatFooter').load('footer.html') 
     $('#rightNav').load('rightNav.html') 
    }); 
</script>

在頁面上在頁腳加載像這樣的情況下，地圖不會每次都顯示 - 只是偶爾顯示。

我是否缺少簡單的導致地圖在每次加載頁面時都無法正確顯示的內容？我不想將頁腳編碼到每個頁面上。

任何建議表示歡迎。

來源

2014-12-18 user3887400

此刻，當你調用init_map()#map_canvas不存在（它會被加載後來）

呼叫在load -callback功能：

$('#fatFooter').load('footer.html',function(){if(!window.map){init_map();}});

另外它添加到開始的init_map()避免發生錯誤：

if(!document.getElementById('map_canvas')){return;}

來源

2014-12-18 21:45:37

通常這與CSS文件播放不好，或者它找不到某些內容並默認爲瀏覽器的默認值。當我檢查這個控制檯日誌爲您的主頁時，它不包含錯誤。但是當我查看其他頁面時，它拋出一個錯誤，指出「Uncaught TypeError：無法讀取屬性'offsetWidth'null'，這是地圖寬度值的簡稱，這可能是由於所有頁面上的404錯誤，除了index.html由此可以看出在您的瀏覽器源選項卡。呈現出404我會解決這些404錯誤，它應該解決您的問題。

來源

2014-12-18 21:37:16

是它無法找到的文件。 –

你設置頁眉/ fatFooter/rightNav加載代碼和腳本callMap之間的競爭條件。所有這些文件都是異步加載的，所以不能保證它會先完成。爲了防止您的callMap腳本在加載fatFooter之前運行，您需要使用回調，而不是依賴窗口的加載事件。

由於您在兩處使用它，所以將init_map的主體封裝在try/catch中可能最簡單（以處理競爭條件不符合您的方式的情況），並添加一個腳本阻止footer.html的底部調用init_map - 但也包裝它在try/catch。因此無論哪種方式，一個try/catch塊都會觸發。

另一種選擇是創建一個自定義事件，該事件由加載footer.html觸發，並由callMap腳本偵聽。

來源

2014-12-18 21:50:16 DaveS

谷歌地圖不顯示在文件中調用網頁

回答

相關問題