How to hide legend tooltips and saved only Contries names in google geo chart

Question

Hey guys I am trying to hide legend tooltips and save only country names or hide all tooltips but not successful. Please help. Than is the code that I used:

<div>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["geomap"]});
      google.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'ATI'],
          ['Portugal', 1],
          ['Brazil', 7],
          ['Peru', 9],
          ['Argentina', 3],
          ['Spain', 3],
          ['Mexico', 3],
          ['Venezuela', 7],
          ['Ecuador', 4],
          ['Chile', 6],
          ['Colombia', 3],          
          ['Costa Rica', 4],

        ]);

        var options = {};

        options['dataMode'] = 'regions';
        options['region'] = 'world';
        options['showLegend'] = false;
        options['width'] = '100%';
        options['tooltip.trigger'] = 'none';
        options['tooltip'] = {textStyle: {color: '#FFF'}, showColorCode: false};
        options['tooltip.textStyle'] = {color: 'white'};
        options['height'] = '600px';
        options['colors'] = [0xf9ffed, 0xff0943, 0x50eb1f, 0xeab4d2];
        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);
        geomap.draw(data, options);



      };
    </script>
     <div align="center" id="regions_div" style="width: auto; height: auto;"></div>

</div>

As a result I see a map but with legend numbers. And I do not know how to hide them.

Answer 1

GeoMap (google.visualization.GeoMap) is a Flash based control and it's not supported to configure tooltip visibility for it, whereas GeoChart (google.visualization.GeoChart) is a SVG based control which in turn replaces GeoMap control and supports more options for customizing it, in particular the ability to hide a tooltip.

Having said that i would suggest to replace GeoMap with GeoChart as demonstrated below.

Example

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

function drawMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'ATI'],
      ['Portugal', 1],
      ['Brazil', 7],
      ['Peru', 9],
      ['Argentina', 3],
      ['Spain', 3],
      ['Mexico', 3],
      ['Venezuela', 7],
      ['Ecuador', 4],
      ['Chile', 6],
      ['Colombia', 3],
      ['Costa Rica', 4],

    ]);

    var options = {};


    options['colorAxis'] = { colors: ['#f9ffed', '#ff0943', '#50eb1f', '#eab4d2'] };
    options['tooltip'] = { trigger: 'none' };
    options['legend'] = 'none';
    options['displayMode'] = 'regions';
    options['width'] = '100%';
    options['height'] = '600px';

    var container = document.getElementById('regions_div');

    var geomap = new google.visualization.GeoChart(container);
    geomap.draw(data, options);



};

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div align="center" id="regions_div" style="width: auto; height: auto;"></div>