Singapore and RegioClick

[Sima Kan]

Hello!

I'm trying to create a world map of a handful of countries. Am also trying to implement the regionclick to redraw the map to the selected country and am facing some issues. Hoping someone here may be able to help me.

1. first issue has to do with Singapore. I gave the country code as SG as per the ISO Codes, but I don't see it highlighted in the map. Alternately, I tried with the full country name as well. But no result. 

Any idea why Singapore is not highlighted?

2. Issue 2 is with the region click. I am using the select handler with regionclick to get the country that has been clicked. I wanted to redraw the map of that country with the state(s) being passed to the datatable. But when I click on the country, nothing happens. No alerts or no re-draw. What am I doing wrong here? Could someone please take a look at the code below and let me know what I am missing?

Thanks so much!

Regards,
SimaKan

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>

   <script type="text/javascript">

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

google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

 var data = google.visualization.arrayToDataTable([

    ['Country'],

    ['IN'],

    ['US'],

    ['GB'],

    ['SG']

  ]);

  var options = {};

      options['region'] = 'world';

      options['resolution'] = 'countries';

      options['width'] = 900;

      options['height'] = 750;

      options['colors'] = ['#f1f1f1', '#03244d'];

    options['legend'] = 'none';

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

  var geochart = new google.visualization.GeoChart(container);

     // register the 'select' event handler

      google.visualization.events.addListener(geochart, 'select', function () {

          var selection = geochart.getSelection();

          var value = data.getValue(selection[0].row, 0);

          alert('value is: '+value);

         options['region'] = value;

alert('value2 is: '+value);

         if (value == 'United States') {

alert('value3 is: '+value);

         var data = google.visualization.arrayToDataTable([

           ['State',  'University'],

           ['California', 'Loyola Marymount University' ]

         ]);

         };

var options = {  displayMode: 'regions',

           resolution: 'provinces'

      };

geochart.draw(data, options);

});

geochart.draw(data, options);

}

[asgallant]

1) I believe Singapore is too small to display on the map (unless you draw the map very large).

2) There are a handful of small changes you need to make to make this work.

    a) You set the 'region' parameter of options, but then overwrite options with a new object, wiping out the old one.

    b) You test value == 'United States', but have 'US' in your DataTable - this will never match.

I made the fixes and wrote up a working jsfiddle for you: http://jsfiddle.net/asgallant/B77bT/

[Sima Kan]

Thanks so much and apologize for the oversights. The code works now and looks great.

One other question - there is currently no way to display multiple values onmouseover correct? If I were to achieve this, are there any workarounds?

Meaning, for the state of california, I want to display values 1,2 and 3 as a list.

Thanks again for your prompt response.

Regards,

SK

[asgallant]

You would have to format the the DataTable column or use a calculated column in a DataView to achieve that.