マーカーはGeoChartには表示されませんが、地図はちょうど細かく表示されます

Question

Geochartマーカーをマップに読み込むのに問題があります。 Googleが提供するスクリプトは、私のウェブサイトに空白の地図を表示しますが、マーカーと地図はjsfiddle上に表示されるように表示されます。どんな助けでも大歓迎です。

は、ここでは、コードです：ネットワークは、ジオコーディングをブロックされる可能性がありますように

この forumから基づい

<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> 

Answer 1

私はそれを理解しました！どうやらGoogleはgeochartsにマーカーを表示するためにAPIキーを必要としているようです。変更された機能的なスクリプトがあります。 2番目の行が唯一の変更です。

<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キーはGoogleから無料です。 「ブラウザキー」を登録する必要があります。ここでは、設定を取得するためのリンクです：返信用 https://developers.google.com/maps/documentation/javascript/get-api-key

Answer 2

、それはそうです。 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"}); 
} 

これが役に立ちます。