title: google geochart set selectected country
body: <p>does anyone have idea how I can mark country from click? 
  I need somehowe when link is clicked to select that country on map as on hover.</p>
  
  <p>I just dont understand how to use setSelection functon from documentation: <a href="https://developers.google.com/chart/interactive/docs/gallery/geochart#Example" rel="nofollow">https://developers.google.com/chart/interactive/docs/gallery/geochart#Example</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Geochart&lt;/title&gt;
  &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='https://www.google.com/jsapi'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
      function isNumber (o) {
          return ! isNaN (o-0) &amp;&amp; o !== null &amp;&amp; o.replace(/^\s\s*/, '') !== "" &amp;&amp; o !== false;
      }
      google.load('visualization', '1', {'packages': ['geochart']});
      google.setOnLoadCallback(drawRegionsMap);
  
      var chart;
      var options = {
          displayMode : 'regions',
          colorAxis : {minValue: 0, maxValue : 100, colors: ['red', '#d1d2d4']},
          legend: 'none',
          region : '142',
          tooltip : {
            trigger: 'none'
          }, 
          backgroundColor : "#f8f8f8", 
          datalessRegionColor : "#d1d2d4"
      };
      function drawRegionsMap() {
          var data = new google.visualization.arrayToDataTable([
            ['Country', 'Popularity'],
            ['Germany', 200],
            ['United States', 300],
            ['Brazil', 400],
            ['Canada', 500],
            ['France', 600]
          ]);
          var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
          var newColor = '#c94033';
  
          google.visualization.events.addListener(chart, 'ready', function() {
              if ($.browser.msie &amp;&amp; $.browser.version &lt; 9) {
                  $('#visualization').find('iframe').contents().on('hover', 'shape', function (e) {
                      if (e.type == 'mouseenter') {
                          if ($(this).prop('fillcolor') != '#f5f5f5' &amp;&amp; $(this).prop('fillcolor') != 'none' &amp;&amp; typeof($(this).prop('fillcolor')) != 'undefined') {
                              $(this).attr('baseColor', $(this).prop('fillcolor'));
                              $(this).prop('fillcolor', newColor);
                          }
                      }
                      else {
                          if (typeof($(this).attr('baseColor')) != 'undefined') {
                              $(this).prop('fillcolor', "#d1d2d4");
                          }
                      }
                  });
              }
              else {
                  $('#visualization').on('hover', 'path[fill!="#f5f5f5"][fill!="none"]', function (e) {
                      if (e.type == 'mouseenter') {
                          $(this).attr('baseColor', $(this).attr('fill'));
                          $(this).attr('fill', newColor);
                      }
                      else {
                          $(this).attr('fill', "#d1d2d4");
                      }
                  });
              }
          });
          chart.draw(data, options);
          google.visualization.events.addListener(chart, 'regionClick', function(e) {
              var country = e.region;
              if(isNumber(country)){
                  options.region = country;
                  drawRegionsMap();
                  $("#continents option").removeAttr("selected");
                  $("#continents option").each(function(){
                      if($(this).val() == country){
                          $(this).attr("selected", "selected");
                      }
                  })
              }
          });
      };
      $(document).ready(function(){
          $("#continents").change(function(){
              options.region = $(this).val();
              drawRegionsMap();
          });
          $(".mark-country").click(function(){
              var country_code = $(this).data("country-code");
              alert("select country: " + country_code);
          });
      });
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id='visualization' style="width: 700px; height: 420px; float: left;"&gt;&lt;/div&gt;
      &lt;div style="float: left; margin-left: 10px;"&gt;
          &lt;a href='javascript: void(0);' data-country-code="DE" class="mark-country"&gt;Germany&lt;/a&gt;&lt;br /&gt;
          &lt;a href='javascript: void(0);' data-country-code="US" class="mark-country"&gt;United States&lt;/a&gt;&lt;br /&gt;
          &lt;a href='javascript: void(0);' data-country-code="BR" class="mark-country"&gt;Brazil&lt;/a&gt;&lt;br /&gt;
          &lt;a href='javascript: void(0);' data-country-code="CA" class="mark-country"&gt;Canada&lt;/a&gt;&lt;br /&gt;
          &lt;a href='javascript: void(0);' data-country-code="FR" class="mark-country"&gt;France&lt;/a&gt; &lt;br /&gt;
          Select continent: &lt;br /&gt;
          &lt;select id="continents"&gt;
              &lt;option value="002"&gt;Africa&lt;/option&gt;
              &lt;option value="142" selected="selected"&gt;Asia&lt;/option&gt;
              &lt;option value="150"&gt;Europe&lt;/option&gt;
              &lt;option value="021"&gt;Northern America&lt;/option&gt;
              &lt;option value="029"&gt;Caribbean&lt;/option&gt;
              &lt;option value="013"&gt;Central America&lt;/option&gt;
              &lt;option value="005"&gt;South America&lt;/option&gt;
              &lt;option value="009"&gt;Oceania&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also here is jsfiddle: <a href="http://jsfiddle.net/KS7L2/" rel="nofollow">http://jsfiddle.net/KS7L2/</a></p>