JSFiddle - React, Tailwind, and code Playground

How to enable hover events for text with google geochart. An example of a Google Geo Chart.

by Karmik Patel

HTML

<!--<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="regions_div" style="width: 900px; height: 500px;"></div>-->
   
   


    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="mapcontainer"></div>
    <div id="tablecontainer">
      <ul class="regions" id="regions"></ul>
    </div>

CSS

div {
      /*display: inline-block;
      vertical-align: top;*/
    }

JavaScript

function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['Province','Population','third'],
        ['Montana',700,88],
        ['Washington',699,65],
        ['Oregon',300,66]
        //add more provinces here, rest all will follow...
      ]);
      data.sort([{column: 0}]);

      var options = {
        region: 'US',
        backgroundColor: '#eee',
        datalessRegionColor: '#ffc801',
        width: 360,
        height: 265,
        resolution: 'provinces',
      };

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

      google.visualization.events.addListener(chart, 'select', myClickHandler);

      // use data table to build regions list
      var regions = document.getElementById('regions');
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        regions.insertAdjacentHTML(
          'beforeEnd',
          '<li data-row="' + i + '"><a class="region" href="/' + data.getValue(i, 0) + '">' + data.getValue(i, 0) + '</a></li>'
        );
      }

      // track events
      var lastEvent = null;
      container.addEventListener('click', function (e) {
        lastEvent = e;
      }, false);
      container.addEventListener('mouseover', function (e) {
        lastEvent = e;
        // dispatch click event to get hover value
        var event = document.createEvent('SVGEvents');
        event.initEvent('click', true, true);
        e.target.dispatchEvent(event);
      }, false);

      function myClickHandler() {
        var selection = chart.getSelection();
        var message = '';
        if (selection.length > 0) {
          if (selection[0].row !== null) {
            if (lastEvent.type === 'mouseover') {
              // mouseover
              var regionLinks = regions.getElementsByTagName('li');
              for (var i = 0; i < regionLinks.length; i++) {
                var regionRow =...