如何在Google GeoCharts区域渐变地图上显示城市名称文本

需要在带区域渐变效果的地图上叠加显示城市/国家名称文本，即合并以下两张地图：区域渐变图、文本标注图。优先选择Google GeoCharts实现，也可接受其他工具。

临时解决方案 #

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages':['geochart'],
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Country', 'Population'],
        ['United States', 330000000],
        ['Germany', 83000000],
        ['France', 67000000]
      ]);

      var options = {
        displayMode: 'regions',
        resolution: 'countries',
        colorAxis: {colors: ['#ece7f2', '#d6604d']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('geo_chart'));
      chart.draw(data, options);
    }
  </script>
  <style>
    #geo_chart {
      position: relative;
      width: 100%;
      height: 600px;
      z-index: -1;
    }

    .country-label {
      position: absolute;
      font-size: 12px;
      font-weight: bold;
      color: #000;
      pointer-events: none;
      z-index: 999;
    }
  </style>
</head>
<body>
  <div id="geo_chart">
    <div class="country-label" style="top: 40%; left: 35%;">United States</div>
    <div class="country-label" style="top: 48%; left: 60%;">Germany</div>
    <div class="country-label" style="top: 52%; left: 55%;">France</div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Prem Kumar