Маркеры не отображаются в GeoChart, но карта отображается нормально.

У меня возникли проблемы с загрузкой маркеров 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>

person Alex B    schedule 05.07.2016    source источник


Ответы (2)


Я понял! Судя по всему, 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

person Alex B    schedule 08.07.2016
comment
Любые предложения по включению этого для использования переменной среды или чего-то еще для ключа API, чтобы ключ API не был жестко запрограммирован (что представляет угрозу безопасности)? - person Jack; 15.12.2016
comment
stackoverflow.com/ вопросы/39625587/ - person Alex B; 16.12.2016

Судя по этому форуму, ваша сеть может блокировать геокодирование. GeoChart необходимо геокодировать маркеры, чтобы знать, где их рисовать.

Проверьте этот связанный трек SO и пример из 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"});
}

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

person abielita    schedule 06.07.2016
comment
Спасибо за ответ! Я обнаружил ряд ошибок консоли, которые, похоже, были результатом моего блокировщика рекламы. После отключения блокировщика рекламы была только одна консольная ошибка, которая, я думаю, могла быть проблемой: Ошибка Google Maps API: MissingKeyMapError Я сгенерировал ключ API, но теперь не знаю, как/куда его вставить в скрипт. - person Alex B; 07.07.2016