谷歌地圖和谷歌圖表在同一頁面

出於某種原因，我無法在同一頁面中加載Google地圖v3 API和谷歌圖表API。谷歌地圖和谷歌圖表在同一頁面

但是，如果我取消註釋行加載圖表API：

google.load('visualization', '1.0', {'packages':['corechart']});

...然後突然地圖上沒有出現，與控制檯上沒有錯誤。

我在最近的Chrome上試過這個。

任何提示？

來源

2014-02-23 Yaniv Aknin

您可以事件偵聽器之前像updated fiddle

google.load('visualization', '1.0', {'packages':['corechart']}); 

document.addEventListener('DOMContentLoaded', function() { 
    //google.load('visualization', '1.0', {'packages':['corechart']}); 
    google.setOnLoadCallback(function() { 
     window.map = new google.maps.Map(
     document.querySelectorAll('#map')[0], { 
      zoom: 2, 
      center: new google.maps.LatLng(0, 0), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 
    }); 
});

執行負載，或者你可以像在谷歌文檔Dynamic Load描述做動態與回調。請參閱google.load('visualization'…) bug?。

來源

2014-02-23 10:40:31

設置負載回調的描述[這裏]（http://stackoverflow.com/questions/21947924/google-loadvisualization-bug）固定它。謝謝！ –

@AntoJurković，注意這一點：使用該方法可以在文檔加載之前加載API，因此回調被註冊得太晚並且從不被調用。如果您必須等待文檔加載，則應該從文檔加載處理程序中調用google.load以確保回調運行。 – asgallant

有（通常）不需要等待文檔加載來繪製可視化API的東西。使用這種格式來代替：

google.load('visualization', '1.0', {'packages':['corechart']}); 
google.setOnLoadCallback(function() { 
    window.map = new google.maps.Map(
    document.querySelectorAll('#map')[0], { 
     zoom: 2, 
     center: new google.maps.LatLng(0, 0), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 
}); 

document.addEventListener('DOMContentLoaded', function() { 
    // do other stuff on document load 
});

http://jsfiddle.net/asgallant/3Sg8m/2/

來源

2014-02-24 18:12:10 asgallant

谷歌地圖和谷歌圖表在同一頁面

回答

相關問題