使用Google图表库制作未显示的GeoChart

Question

everyone. I have a problem. I am making a web page and I want to include a GeoChart in it. The problem is that even when I directly copy-paste from the Google developer's website and incorporate the code into the pre-existing one, the map doesn't show. I don't know what I am doing wrong.

This is the JavaScript portion:-

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

        function drawRegionsMap()
        {
            var data = google.visualization.arrayToDataTable([
            ['Country', 'Popularity'],
            ['Germany', 200],
            ['United States', 300],
            ['Brazil', 400],
            ['Canada', 500],
            ['France', 600],
            ['RU', 700]
            ]);

            var options = {};

            var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

            chart.draw(data, options);
        }
</script>

This is the HTML portion:-

<div=id='regions_div' style="width: 600px; height: 500px;"></div>

Answer 1

looks like the main problem is the extra = in the div definition, here...
<div=id='regions_div' style="width: 600px; height: 500px;"></div>

as such, the chart cannot find the container, which is being reported in the browser console.

change to...
<div id='regions_div' style="width: 600px; height: 500px;"></div>

also, be sure to load both libraries -- loader.js & jsapi

following is a working snippet...

 google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); }, packages:['geochart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.google.com/jsapi"></script> <div id='regions_div' style="width: 600px; height: 500px;"></div>