GeoChart: markers load very slowly

Question

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

  function drawRegionsMap() {
    var query = new google['visualization'].Query('https://docs.google.com/spreadsheets/d/____&headers=1&range=A1:B')
    query.send(handleQueryResponseTR);
    }

  function handleQueryResponseTR(response) {
            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' +            response.getDetailedMessage());
            return;
        }

    var options = {
      region: 'world',
      displayMode: 'markers',
    sizeAxis: { minValue: 0, maxValue: 5 },
      colorAxis: {
        colors: ['#fff', '#000']
      },
      legend: 'none'
    };

    var data = response.getDataTable();

    var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));

    chart.draw(data, options);
  };

The spreadsheet has the format:

 Country     Value
 XX          XX
 XX          XX

There are approximately 40 entries (40 different countries). Everything works, but the map loads the markers one by one and it takes about 30 seconds to load all of them. Why is it so slow? It's not the fact that it's loading them from a Google Sheets, even when hard coded the load time is the same.

JSFIDDLE

Egis

@WhiteHat thank you for your response. I have read the other answers, but this seems different. Here's a JSfiddle: jsfiddle.net/multiformeingegno/cj9jrdxw/1 As you can see it takes time to load all the markers, they're not loaded at the same time at the beginning.. – Egis

Answer 1

when in markers mode format, using latitude and longitude seems to work best...

loads instantly...

use a data view to add the country name to the tooltip,

see following working snippet...

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

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Lat','Lng','Value','Country'],
    [41.153332,20.168331,58,'Albania'],
    [-25.274398,133.775136,28,'Australia'],
    [40.143105,47.576927,47,'Azerbaijan'],
    [23.684994,90.356331,52,'Bangladesh'],
    [-3.373056,29.918886,76,'Burundi'],
    [12.565679,104.990963,28,'Cambodia'],
    [56.130366,-106.346771,79,'Canada'],
    [-35.675147,-71.542969,48,'Chile'],
    [26.820553,30.802498,7,'Egypt'],
    [-16.578193,179.414413,127,'Fiji'],
    [46.227638,2.213749,25,'France'],
    [51.165691,10.451526,29,'Germany'],
    [22.396428,114.109497,9,'Hong Kong'],
    [20.593684,78.96288,119,'India'],
    [-0.789275,113.921327,35,'Indonesia'],
    [31.046051,34.851612,41,'Israel'],
    [41.87194,12.56738,4,'Italy'],
    [30.585164,36.238414,102,'Jordan'],
    [-0.023559,37.906193,121,'Kenya'],
    [29.31166,47.481766,59,'Kuwait'],
    [33.854721,35.862285,127,'Lebanon'],
    [55.169438,23.881275,3,'Lithuania'],
    [23.634501,-102.552784,10,'Mexico'],
    [9.081999,8.675277,48,'Nigeria'],
    [30.375321,69.345116,91,'Pakistan'],
    [31.952162,35.233154,66,'Palestinian Territories'],
    [12.879721,121.774017,80,'Philippines'],
    [51.919438,19.145136,242,'Poland'],
    [25.354826,51.183884,86,'Qatar'],
    [45.943161,24.96676,35,'Romania'],
    [61.52401,105.318756,133,'Russia'],
    [23.885942,45.079162,15,'Saudi Arabia'],
    [1.352083,103.819836,2,'Singapore'],
    [48.669026,19.699024,9,'Slovakia'],
    [35.907757,127.766922,41,'South Korea'],
    [40.463667,-3.74922,111,'Spain'],
    [7.873054,80.771797,97,'Sri Lanka'],
    [-6.369028,34.888822,34,'Tanzania'],
    [13.443182,-15.310139,129,'Gambia'],
    [38.963745,35.243322,2,'Turkey'],
    [23.424076,53.847818,85,'United Arab Emirates'],
    [55.378051,-3.435973,56,'United Kingdom'],
    [48.379433,31.16558,97,'Ukraine'],
    [37.09024,-95.712891,130,'United States'],
    [6.42375,-66.58973,120,'Venezuela'],
    [45.1,15.2,20,'Croatia']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, {
    calc: function (dt, row) {
      return dt.getValue(row, 3) + ': ' + dt.getFormattedValue(row, 2);
    },
    role: 'tooltip',
    type: 'string'
  }]);

  var options = {
    displayMode: 'markers',
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors"></div>

---

note: found country lat / lng list here --> countries.csv

---

see following snippet for comparing load time with country name only...

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

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Value'],
    [{v: 'Albania'}, {v: 58}],
    [{v: 'Australia'}, {v: 28}],
    [{v: 'Azerbaijan'}, {v: 47}],
    [{v: 'Bangladesh'}, {v: 52}],
    [{v: 'Burundi'}, {v: 76}],
    [{v: 'Cambodia'}, {v: 28}],
    [{v: 'Canada'}, {v: 79}],
    [{v: 'Chile'}, {v: 48}],
    [{v: 'Egypt'}, {v: 7}],
    [{v: 'Fiji'}, {v: 127}],
    [{v: 'France'}, {v: 25}],
    [{v: 'Germany'}, {v: 29}],
    [{v: 'Hong Kong'}, {v: 9}],
    [{v: 'India'}, {v: 119}],
    [{v: 'Indonesia'}, {v: 35}],
    [{v: 'Israel'}, {v: 41}],
    [{v: 'Italy'}, {v: 4}],
    [{v: 'Jordan'}, {v: 102}],
    [{v: 'Kenya'}, {v: 121}],
    [{v: 'Kuwait'}, {v: 59}],
    [{v: 'Lebanon'}, {v: 127}],
    [{v: 'Lithuania'}, {v: 3}],
    [{v: 'Mexico'}, {v: 10}],
    [{v: 'Nigeria'}, {v: 48}],
    [{v: 'Pakistan'}, {v: 91}],
    [{v: 'Pakistan Balochistan'}, {v: 55}],
    [{v: 'Palestine, State of'}, {v: 66}],
    [{v: 'Philippines'}, {v: 80}],
    [{v: 'Poland'}, {v: 242}],
    [{v: 'Qatar'}, {v: 86}],
    [{v: 'Romania'}, {v: 35}],
    [{v: 'Russian Federation'}, {v: 133}],
    [{v: 'Saudi Arabia'}, {v: 15}],
    [{v: 'Singapore'}, {v: 2}],
    [{v: 'Slovakia'}, {v: 9}],
    [{v: 'Korea, Republic of'}, {v: 41}],
    [{v: 'Spain'}, {v: 111}],
    [{v: 'Sri Lanka'}, {v: 97}],
    [{v: 'Tanzania, United Republic of'}, {v: 34}],
    [{v: 'Gambia'}, {v: 129}],
    [{v: 'Turkey'}, {v: 2}],
    [{v: 'United Arab Emirates'}, {v: 85}],
    [{v: 'United Kingdom'}, {v: 56}],
    [{v: 'Ukraine'}, {v: 97}],
    [{v: 'United States'}, {v: 130}],
    [{v: 'Venezuela, Bolivarian Republic of'}, {v: 120}],
    [{v: 'Croatia'}, {v: 20}]
  ]);

  var options = {
    displayMode: 'markers',
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors"></div>

---

EDIT

remove the coordinates from the tooltip by using option --> tooltip.isHtml: true

tooltip: {
  isHtml: true
}

and the following css...

.google-visualization-tooltip-item:first-child {
  display: none;
  visibility: hidden;
}

the tooltip column must have a property for --> p: {html: true}

and for some reason, column properties are not recognized
when using a data view to draw the chart

to correct, convert the view to a data table before drawing...
view.toDataTable()

see following working snippet...

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

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Lat','Lng','Value','Country'],
    [41.153332,20.168331,58,'Albania'],
    [-25.274398,133.775136,28,'Australia'],
    [40.143105,47.576927,47,'Azerbaijan'],
    [23.684994,90.356331,52,'Bangladesh'],
    [-3.373056,29.918886,76,'Burundi'],
    [12.565679,104.990963,28,'Cambodia'],
    [56.130366,-106.346771,79,'Canada'],
    [-35.675147,-71.542969,48,'Chile'],
    [26.820553,30.802498,7,'Egypt'],
    [-16.578193,179.414413,127,'Fiji'],
    [46.227638,2.213749,25,'France'],
    [51.165691,10.451526,29,'Germany'],
    [22.396428,114.109497,9,'Hong Kong'],
    [20.593684,78.96288,119,'India'],
    [-0.789275,113.921327,35,'Indonesia'],
    [31.046051,34.851612,41,'Israel'],
    [41.87194,12.56738,4,'Italy'],
    [30.585164,36.238414,102,'Jordan'],
    [-0.023559,37.906193,121,'Kenya'],
    [29.31166,47.481766,59,'Kuwait'],
    [33.854721,35.862285,127,'Lebanon'],
    [55.169438,23.881275,3,'Lithuania'],
    [23.634501,-102.552784,10,'Mexico'],
    [9.081999,8.675277,48,'Nigeria'],
    [30.375321,69.345116,91,'Pakistan'],
    [31.952162,35.233154,66,'Palestinian Territories'],
    [12.879721,121.774017,80,'Philippines'],
    [51.919438,19.145136,242,'Poland'],
    [25.354826,51.183884,86,'Qatar'],
    [45.943161,24.96676,35,'Romania'],
    [61.52401,105.318756,133,'Russia'],
    [23.885942,45.079162,15,'Saudi Arabia'],
    [1.352083,103.819836,2,'Singapore'],
    [48.669026,19.699024,9,'Slovakia'],
    [35.907757,127.766922,41,'South Korea'],
    [40.463667,-3.74922,111,'Spain'],
    [7.873054,80.771797,97,'Sri Lanka'],
    [-6.369028,34.888822,34,'Tanzania'],
    [13.443182,-15.310139,129,'Gambia'],
    [38.963745,35.243322,2,'Turkey'],
    [23.424076,53.847818,85,'United Arab Emirates'],
    [55.378051,-3.435973,56,'United Kingdom'],
    [48.379433,31.16558,97,'Ukraine'],
    [37.09024,-95.712891,130,'United States'],
    [6.42375,-66.58973,120,'Venezuela'],
    [45.1,15.2,20,'Croatia']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, {
    calc: function (dt, row) {
      return '<div><span>' + dt.getValue(row, 3) + '</span>: ' + dt.getFormattedValue(row, 2) + '</div>';
    },
    role: 'tooltip',
    type: 'string',
    p: {html: true}
  }]);

  var options = {
    displayMode: 'markers',
    tooltip: {
      isHtml: true
    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(view.toDataTable(), options);
}

.google-visualization-tooltip-item:first-child {
  display: none;
  visibility: hidden;
}

.google-visualization-tooltip-item span {
  font-weight: bold;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors"></div>

Zebulen

Thanks! Can I replace the tooltip title or shall I just add a showTitle: false in the tooltip options to hide it? – Egis