JSFiddle - React, Tailwind, and code Playground

by Karmik Patel

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="visualization" style="margin: 1em"> </div>

This fiddler shows, how to customize regions borders.
-KP

CSS

#visualization svg path[fill^='none'] {
  stroke-width:4px;
  stroke-opacity:0.5;
}

JavaScript

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Population'],
    ['LK-1', 19581477],
    ['LK-2', 19581477],
    ['LK-3', 19581477],
    ['LK-8', 15181477],
    ['LK-9', 11581477],
    ['LK-4', 19581477],
    ['LK-5', 19581477],
    ['LK-6', 19581477],
    ['LK-7', 19581477],
    
  ]);
  
  var opts = {
    region: 'LK',
    displayMode: 'regions',
    resolution: 'provinces',
    //datalessRegionColor: 'transparent',
    width: 640, 
    height: 480
  };
  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, opts);
};