Маркеры не появятся на GeoChart, но карта отобразится просто отлично

Question

У меня возникли проблемы с загрузкой маркеров Geochart на карту. Сценарий, предоставляемый Google, отображает пустую карту на моем веб-сайте, но маркеры и карта отображаются так же, как и на jsfiddle. Любая помощь приветствуется.

Вот код:

<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 теперь требует, чтобы ключ API отображал маркеры на геочартах. Вот модифицированный, функциональный скрипт. Вторая строка - единственное изменение.

<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

Исходя из этого 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"}); 
} 

Надеюсь, это поможет!