GeoChart上不會顯示標記，但地圖顯示正常

我無法將Geochart標記加載到地圖上。 Google提供的腳本在我的網站上呈現空白地圖，但標記和地圖顯示爲應該在jsfiddle上顯示。任何幫助將非常感激。GeoChart上不會顯示標記，但地圖顯示正常

下面的代碼：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

<script type="text/javascript"> 

google.charts.load('current', {'packages': ['geochart']}); 
google.charts.setOnLoadCallback(drawMarkersMap); 

    function drawMarkersMap() { 
    var data = google.visualization.arrayToDataTable([ 
    ['City', 'Collaborator'], 
    ['Detroit', "text here"], 
    ['Cleveland', "text here"], 
    ['Joondalup', "text here"], 
    ['Wanaka', "text here"] 
    ['Liverpool', "text here"], 
    ['Styria', "text here"], 
    ['Edwardsville', "text here"], 
    ['Austin', "text here"], 
    ['Houston', "text here"], 
    ['Stockholm', "text here"], 
    ]); 

    var options = { 
    region: 'world', 
    displayMode: 'markers', 
    backgroundColor: '#252426', 
    colorAxis: {colors: ['blue']}, 
    magnifyingGlass: {enable: false}, 
    defaultColor: '#f1910e', 
    enableRegionInteractivity: 'true', 
    }; 

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
}; 
</script>

來源

2016-07-05 Alex B

我想通了！顯然，Google現在需要一個API密鑰才能在geocharts上顯示標記。這是修改的功能腳本。第二行是唯一的變化。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE" async="" defer="defer"></script> 

<script type="text/javascript"> 

google.charts.load('current', {'packages': ['geochart']}); 
google.charts.setOnLoadCallback(drawMarkersMap); 

function drawMarkersMap() { 
var data = google.visualization.arrayToDataTable([ 
['City', 'Collaborator'], 
['Detroit', "text here"], 
['Cleveland', "text here"], 
['Joondalup', "text here"], 
['Wanaka', "text here"] 
['Liverpool', "text here"], 
['Styria', "text here"], 
['Edwardsville', "text here"], 
['Austin', "text here"], 
['Houston', "text here"], 
['Stockholm', "text here"], 
]); 

var options = { 
region: 'world', 
displayMode: 'markers', 
backgroundColor: '#252426', 
colorAxis: {colors: ['blue']}, 
magnifyingGlass: {enable: false}, 
defaultColor: '#f1910e', 
enableRegionInteractivity: 'true', 
}; 

var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); 
chart.draw(data, options); 
}; 
</script>

如果您的網站沒有收到太多的流量，API密鑰可以通過谷歌免費使用。您需要註冊一個「瀏覽器密鑰」。這裏有一個鏈接來設置它： https://developers.google.com/maps/documentation/javascript/get-api-key

來源

2016-07-08 18:38:57

任何建議使它能夠使用環境變量或api密鑰，以便api密鑰不是硬編碼（這是一種安全風險）？ – Jack

http://stackoverflow.com/questions/39625587/how-do-i-securely-use-google-api-keys –

從這個forum基礎，它看起來像你的網絡可能會阻止地理編碼。 GeoChart需要對標記進行地理編碼，以便知道在哪裏繪製它們。

檢查這個相關SO thread和example from GitHub。

function drawVisualization() { 
    var data = google.visualization.arrayToDataTable([ 
    ['State', 'Foo Factor'], 
    ['US-IL', 200], 
    ['US-IN', 300], 
    ['US-IA', 20], 
    ['US-RI', 150] 
    ]); 

    var geochart = new google.visualization.GeoChart(
     document.getElementById('visualization')); 
    geochart.draw(data, {width: 556, height: 347, region: "US", resolution: "provinces"}); 
}

希望這有助於！

來源

2016-07-06 13:59:24 abielita

感謝您的回覆！我發現了一些控制檯錯誤，這似乎是我的adblocker的結果。禁用adblocker後，只有一個控制檯的錯誤，我想這可能是問題：「谷歌地圖API錯誤：MissingKeyMapError」我生成的API密鑰，但現在我不知道如何/在哪裏將其插入到腳本中。 –

GeoChart上不會顯示標記，但地圖顯示正常

回答

相關問題