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/
On Wednesday, May 23, 2012 3:08:07 PM UTC-4, Sima Kan wrote:
>
> 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);
>
> }
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/WX1cpYmkxXEJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
