Ok,
Here what you did wrong....
1. you cannot use "google.setOnLoadCallback(drawMap);" more than once....
you have nothing to do with it. nor the "google.load" function.
write the following to call both functions:
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMaps);
function drawMaps() {
drawMap();
drawMap2();
}
2. you have only one div element for the maps. have two and set each
drawing function to be attached to it
<div id='map_canvas1'></div>
<div id='map_canvas2'></div>
now, as for the other part of your project (the drop down lists), I didn't
understand what you want to do with it. can you explain in more details?
good luck,
On Sat, Nov 19, 2011 at 7:18 PM, JennieB <[email protected]> wrote:
> Hi there,
>
> I'm a student and I am exploring the use of Geomaps for a project I am
> currently doing. But with not a huge amount of coding knowledge I
> have reached a dead end and I am hoping someone might be able to help
> me.
>
> Firstly, on my web page I wish to show two Geomaps, one above the
> other. I can't work out how to do this.
>
> Secondly, I have a drop down list which the user can select from.
> When an option is chosen, I would like the Geomap to display the
> relevant data for that option. I wondered if using an if statement
> would be the way to go, or to use the dashboard api, or if it is
> possible at all?
>
> I really appreciate any advice you can give me as I'm feeling pretty
> lost!
>
> Jen.
>
> Here is a copy of my code so far:
>
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=utf-8"/
> >
> <title>Worldwide Production and Consumption of Non-Ferrous Metals</
> title>
>
> <script type='text/javascript' src='https://www.google.com/jsapi'></
> script>
> <script type='text/javascript'>
>
>
> //Copper Production Map
> google.load('visualization', '1', {'packages': ['geomap']});
> google.setOnLoadCallback(drawMap);
>
> function drawMap() {
> var data = new google.visualization.DataTable();
> data.addRows(10);
> data.addColumn('string', 'Country');
> data.addColumn('number', 'Copper Production (Thousand Tonnes)');
> data.setValue(0, 0, 'KR');
> data.setValue(0, 1, 535.2);
> data.setValue(1, 0, 'Poland');
> data.setValue(1, 1, 539.1);
> data.setValue(2, 0, 'India');
> data.setValue(2, 1, 632.4);
> data.setValue(3, 0, 'Zambia');
> data.setValue(3, 1, 723.3);
> data.setValue(4, 0, 'Germany');
> data.setValue(4, 1, 723.8);
> data.setValue(5, 0, 'Russia');
> data.setValue(5, 1, 864.0);
> data.setValue(6, 0, 'United States');
> data.setValue(6, 1, 1212.0);
> data.setValue(7, 0, 'Japan');
> data.setValue(7, 1, 1566.0);
> data.setValue(8, 0, 'Chile');
> data.setValue(8, 1, 3916.1);
> data.setValue(9, 0, 'China');
> data.setValue(9, 1, 4525.0);
>
> var options = {};
> options['dataMode'] = 'regions';
> options['width'] = '750px';
> options['height'] = '420px';
> options['colors'] = [0xDB4D4D,0xCC0000,0x7A0000,0x3D0000]
>
> var container = document.getElementById('map_canvas');
> var geomap = new google.visualization.GeoMap(container);
> geomap.draw(data, options);
> };
>
>
> //Copper Consumption Map
> google.load('visualization', '1', {'packages': ['geomap']});
> google.setOnLoadCallback(drawMap2);
>
> function drawMap2() {
> var data = new google.visualization.DataTable();
> data.addRows(10);
> data.addColumn('string', 'Country');
> data.addColumn('number', 'Copper Consumption (Thousand
> Tonnes)');
> data.setValue(0, 0, 'Brazil');
> data.setValue(0, 1, 443.7);
> data.setValue(1, 0, 'India');
> data.setValue(1, 1, 428.2);
> data.setValue(2, 0, 'Taiwan');
> data.setValue(2, 1, 539.8);
> data.setValue(3, 0, 'Russia');
> data.setValue(3, 1, 452.7);
> data.setValue(4, 0, 'Italy');
> data.setValue(4, 1, 456.0);
> data.setValue(5, 0, 'KR');
> data.setValue(5, 1, 839.1);
> data.setValue(6, 0, 'Japan');
> data.setValue(6, 1, 1045.0);
> data.setValue(7, 0, 'Germany');
> data.setValue(7, 1, 1273.5);
> data.setValue(8, 0, 'United States');
> data.setValue(8, 1, 1770.9);
> data.setValue(9, 0, 'China');
> data.setValue(9, 1, 7527.8);
>
> var options = {};
> options['dataMode'] = 'regions';
>
> var container = document.getElementById('map_canvas');
> var geomap2 = new google.visualization.GeoMap(container);
> geomap2.draw(data, options);
>
> };
>
>
> </script>
> </head>
>
> <body>
> <div id="my_title"><h3>Worldwide Production and Consumption of Non-
> Ferrous Metals</h3></div>
> <div id='map_canvas'></div>
>
> <div style="position: absolute; left: 760px; top: 5px; height:
> 400px; width: 200px; padding: 1em;" id='form'>
> <form name="varform"position: absolute; left: 760px; top: 5px;
> height: 400px; width: 200px; padding: 1em;"id='form'>
>
> <form name="varform" method="get">
> <p>
> <b>Production</b>
> <select name="varfg" onchange="mapEvent()">
> <option value="Aluminium">Aluminium</option>
> <option value="Copper">Copper</option>
> <option value="Lead">Lead</option>
> <option value="Nickel">Nickel</option>
> <option value="Tin">Tin</option>
> </select>
> </p>
>
> <form name="varform" method="get">
> <p>
> <b>Consumption</b>
> <select name="varfg" onchange="mapEvent()">
> <option value="Aluminium">Aluminium</option>
> <option value="Copper">Copper</option>
> <option value="Lead">Lead</option>
> <option value="Nickel">Nickel</option>
> <option value="Tin">Tin</option>
> </select>
> </p>
>
> </body>
>
> </html>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> 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.
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
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.
