I want to select and highlight country on google Geochart when someone click on a html button or div

I need a country to be selected and highlighted on google Gecochart when a button or Div is clicked. I was able to achieve that completely if someone clicks on the country on Geochart, but partially if someone clicks the button/div as the Geochart is not highlighting the country until the user moves the mouse pointer above the geochart.

I am trying to implement that using the code below

var chart='';
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 container =document.getElementById('regions_div');
         chart = new google.visualization.GeoChart(container);
observer = new MutationObserver(function (nodes) {
    Array.prototype.forEach.call(nodes, function (node) {
      // check for new nodes
      
      if (node.addedNodes.length > 0) {
        
        Array.prototype.forEach.call(node.addedNodes, function (addedNode) {
          // the tooltip element will also be here, we only want the group elements
          if (addedNode.tagName === 'g') {
            // find children of the group element
            Array.prototype.forEach.call(addedNode.childNodes, function (childNode) {
              // check for path element, change stroke
              if (childNode.tagName === 'path') {
                childNode.setAttribute('stroke', '#FF0000');
                //childNode.setAttribute('fill', '#BE965C');
              }
            });
          }
        });
      }
    });
  });

  
  // activate mutation observer
observer.observe(container, {
  childList: true,
  subtree: true
});
        chart.draw(data, options);
      }
      
      
      function myclick() {
//google.visualization.events.trigger(chart, 'select',[{ row: 3, column: null }]);

      chart.setSelection([{ row: 3, column: null }]);
            console.log( chart.getSelection());
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="regions_div" style="width: 900px; height: 500px;"></div>
       <div onclick="myclick()">
        text
       </div>
       
       <button type="button" onclick="myclick()">Click Me!</button>

I also tried to call google.visualization.events.trigger(chart, 'select', chart.getSelection()); to trigger the selection and highlight directly but it didn't work.

Any idea how to to highlight the country when clicking on the button/div directly (without the need to move the mouse over the Gecochart)?

Thank you!

The code can also be found in this snippet https://jsfiddle.net/nmaybar/8p2zruso/

Solution

I have solved the issue by changing the version from 'current' to '49' by adjusting the following code:

google.charts.load('current', { 'packages':['geochart'],});

To:

google.charts.load('49', {'packages':['geochart'],});

I am not sure why it doesn't work with version 'current' or 'upcoming'. I think it is a bug.