JSFiddle - React, Tailwind, and code Playground

by cmoreira

HTML

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> 
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>google.charts.load('42', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {var data = new google.visualization.DataTable();

 data.addColumn('string', 'Country');
 data.addColumn('number', 'Value'); 
 data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();

 data.addRows([[{v:'US-CA',f:'tetete'},0,' etete']]);
 ivalue['US-CA'] = '';

 var options = {
 backgroundColor: {fill:'transparent',stroke:'#FFFFFF' ,strokeWidth:0 },
 colorAxis:  {minValue: 0, maxValue: 0,  colors: ['#6699CC']},
 legend: 'none',	
 datalessRegionColor: '#f9ddd2',
 displayMode: 'regions', 
 enableRegionInteractivity: 'true', 
 resolution: 'provinces',
 sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
 region:'US',
 keepAspectRatio: true,
 width:null,
 height:null,
 tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}	
 };
  var chart = new google.visualization.GeoChart(document.getElementById('map_1576857787459')); 
  google.visualization.events.addListener(chart, 'select', function() {
  var selection = chart.getSelection();
  if (selection.length == 1) {
  var selectedRow = selection[0].row;
  var selectedRegion = data.getValue(selectedRow, 0);
  if(ivalue[selectedRegion] != '') { document.location = ivalue[selectedRegion];  }
  }
  });
 chart.draw(data, options);
 }
 window.onresize = function(event) {
     drawVisualization();
 };
 </script>
 <div id='map_1576857787459'></div>

CSS

div[id^="map_"] path:hover {
  fill:#f5f5f5;
}