Google Geo Map Api

[chasethemetal]

Hey all. I'm not a javascript whiz. I am a beginner slowly getting better. I am working with the Google Geo Map API right now, and I can't figure out how to change a var when a region is clicked. My problem is the var "options['region'] = 'world';" needs to be changed to the contents of "(regionData)". Right now when you click the region it will fire off the region code in alert(regionData). But instead of firing that in an alert I need it to change say "options['region'] = 'world';" to "options['region'] = 'US';" Any help would be appreciated! Heres the full code below. <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['geomap']}); function changeRegion(regionData){ alert(regionData); } function drawVisualization() { var data = new google.visualization.DataTable(); data.addRows(4); data.addColumn('string', 'Country'); data.addColumn('number', 'Popularity'); data.setValue(0, 0, 'United States');data.setValue(0, 1, 166);data.setValue(1, 0, 'Canada');data.setValue(1, 1, 10);data.setValue(2, 0, 'Iran');data.setValue(2, 1, 10);data.setValue(3, 0, 'United Kingdom');data.setValue(3, 1, 8); var options = {}; options['region'] = 'world'; options['width'] = '760px'; options['dataMode'] = 'regions'; var geomap = new google.visualization.GeoMap( document.getElementById('visualization')); google.visualization.events.addListener( geomap, 'regionClick', function(e) { changeRegion(e['region']); }); geomap.draw(data, options); } google.setOnLoadCallback(drawVisualization);</script><div id="visualization"></div>

[justsomeguy]

The options variable is a local variable inside the drawVisualization function, so nothing else has access to it. You would need to make it a global variable, or move the code that updates the value into the drawVisualization function. It's best to remove the changeRegion function and put that code in the event handler for regionClick.

[chasethemetal]

Thanks! I thinkkkk I know what you're talking about. Is there anyway you could show me an example of this in my code?

[justsomeguy]

google.visualization.events.addListener(geomap, 'regionClick', function(e) { options['region'] = e['region'];});

[chasethemetal]

I see how now we are calling the function and assigning it the the options['region']. But however when I click this does nothing. This is what the full code looks like now. <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load('visualization', '1', {packages: ['geomap']}); function drawVisualization() {var data = new google.visualization.DataTable();data.addRows(4);data.addColumn('string', 'Country');data.addColumn('number', 'Popularity'); data.setValue(0, 0, 'United States');data.setValue(0, 1, 166);data.setValue(1, 0, 'Canada');data.setValue(1, 1, 10);data.setValue(2, 0, 'Iran');data.setValue(2, 1, 10);data.setValue(3, 0, 'United Kingdom');data.setValue(3, 1, 8); var options = {};options['region'] = 'world';options['width'] = '760px';options['dataMode'] = 'regions'; var geomap = new google.visualization.GeoMap(document.getElementById('visualization')); google.visualization.events.addListener( geomap, 'regionClick', function(e) { options['region'] = e['region'];}); geomap.draw(data, options);} google.setOnLoadCallback(drawVisualization);</script><div id="visualization"></div>

[chasethemetal]

Any more pointers would be appreciated!

[justsomeguy]

All it does is assign the value of e['region'] to options['region']. What else do you want to happen? You said you wanted to change the variable, and that's what it does.

[chasethemetal]

Well. I Guess I assumed if it changed the variable it would change the map. And the map doesn't change. So I guess I need it to reload the page with the new variable in place? I am trying to make it so when you click a region, it changes the map to the zoomed in version of that region.

[chasethemetal]

Figured it out! Just had to throw the geo.draw in again! Thanks so much for your help! <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load('visualization', '1', {packages: ['geomap']}); function drawVisualization() {var data = new google.visualization.DataTable();data.addRows(4);data.addColumn('string', 'Country');data.addColumn('number', 'Popularity'); data.setValue(0, 0, 'United States');data.setValue(0, 1, 166);data.setValue(1, 0, 'Canada');data.setValue(1, 1, 10);data.setValue(2, 0, 'Iran');data.setValue(2, 1, 10);data.setValue(3, 0, 'United Kingdom');data.setValue(3, 1, 8); var options = {};options['width'] = '760px';options['dataMode'] = 'regions'; var geomap = new google.visualization.GeoMap(document.getElementById('visualization')); google.visualization.events.addListener( geomap, 'regionClick', function(e) { options['region'] = e['region'];geomap.draw(data, options);}); geomap.draw(data, options);} google.setOnLoadCallback(drawVisualization);</script><div id="visualization"></div>

[chasethemetal]

Hey all just thought I'd share more. I realized I needed more out of this then just changing the map type. I needed to change variables in my php script which populated the information as well. I came up with a simple solution that I thought I should share. I changed this function.... google.visualization.events.addListener(geomap, 'regionClick', function(e) {options['region'] = e['region'];geomap.draw(data, options);}); AND now this function looks like this: google.visualization.events.addListener(geomap, 'regionClick', function(e) {window.open ("http://www.website.com/script.php?region="+ e['region'],"_self");}); This way I can inject stuff into the php script to change the data it's pulling before the new map type loads.