this.each is not a function error in google geochart

Question

<div id = "geochart" >< /div>

<script type = "text/javascript" >
  google.charts.setOnLoadCallback(drawAcChart);
function drawAcChart() {
var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);
 var options = {
    displayMode: 'text'
  };
var chart = new google.visualization.GeoChart(document.getElementById('geochart'));
chart.draw(data, options);
}
</script>

I have above code to get geograph. but i am getting this.each is not a function error in geochart div . Can any give solution please.

Answer 1

packages are loaded in the load statement...

google.charts.load('current', {
  callback: drawCharts,
  packages: ['corechart', 'geochart']  // <-- packages for regular charts and geo charts
});

regular charts like line, column, and scatter, all use the 'corechart' package

specialty charts, like the geo chart, typically have their own package that needs loading...

be sure to load the 'geochart' package...

---

see following working snippet...

 google.charts.load('current', { callback: drawCharts, // packages for regular charts, and geo charts packages: ['corechart', 'geochart'] }); function drawCharts() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var chartGeo = new google.visualization.GeoChart(document.getElementById('regions_div')); chartGeo.draw(data); var chartCol = new google.visualization.ColumnChart(document.getElementById('chart_div')); chartCol.draw(data); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> <div id="regions_div"></div>