使用Google Charting库制作一个GeoChart，它不会显示任何人

Question

。我有个问题。我正在制作一个网页，我想在其中包含一个GeoChart。问题是，即使从Google开发者的网站直接复制粘贴并将代码合并到已有的代码中，地图也不会显示。我不知道我做错了什么。

这是JavaScript部分： -

<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> 

这是HTML部分： -

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

Answer 1

样子的主要问题是在div定义额外=，这里...
<div=id='regions_div' style="width: 600px; height: 500px;"></div>

因此，图表找不到容器，它正在浏览器控制台中报告。

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

也，一定要加载这两个库 - loader.js & jsapi

下面是一个工作片段...

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>