Okay, I figured it out. I needed to added width and height options and use
the same numbers for all 3 maps, as shown below for the first map.
var optionsD =
{'width':575,
'height':350,
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
backgroundColor: { fill:'transparent' },
colorAxis: {colors: ['#D53E4F', '#F46D43', '#FDAE61', '#FEE08B',
'#E6F598', '#ABDDA4', '#66C2A5', '#3288BD']},
datalessRegionColor: '#D3D3D3',
};
On Saturday, March 9, 2019 at 9:48:15 AM UTC-5, Noel G. wrote:
>
> Hello,
>
> I have independent GeoCharts displayed in 3 tabs and can't figure out why
> the map on the first tab is larger than the maps on tabs 2 and 3. I've
> tried applying "style="width: 900px; height: 500px;", but that didn't make
> a difference. Could someone please take a look at the following code and
> advise?
>
> Thank you,
>
> Noel
>
>
>
> <!DOCTYPE html>
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
> <meta name="robots" content="noindex, nofollow">
> <meta name="googlebot" content="noindex, nofollow">
> <meta name="viewport" content="width=device-width, initial-scale=1">
>
>
> <script
> type="text/javascript"
> src="//code.jquery.com/jquery-1.11.0.js"></script>
>
> <link rel="stylesheet" type="text/css" href="/css/result-light.css">
>
> <link rel="stylesheet" type="text/css" href="
> https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css";>
> <script type="text/javascript" src="
> https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
> "></script>
> <style type="text/css">
> body{
> padding: 5px;
> }
> </style>
>
> </head>
> <body>
>
> <script type="text/javascript" src="
> https://www.gstatic.com/charts/loader.js";></script>
> <script type="text/javascript" src="https://www.google.com/jsapi
> "></script>
>
> <div class="col-md-12">
> <div class="tabbable">
> <ul class="nav nav-tabs" data-tabs="tabs">
> <li class="active">
> <a href="#Four" data-toggle="tab">Departures</a>
> </li>
> <li>
> <a href="#Five" data-toggle="tab">Destinations</a>
> </li>
> <li>
> <a href="#Six" data-toggle="tab">Combined</a>
> </li>
> </ul>
>
>
>
> <div class="tab-content" style="padding: 0px;">
>
>
> <div class="tab-pane active" id="Four">
> <div class="tabbable">
> <div class="tab-content" style="padding: 0px;">
> <div class="tab-pane active" id="FourA">
> <div class="row">
> <div class="col-md-12">
> <div id="geochart3" align="center" display= 'inline-block'></div>
> </div>
> </div>
> </div>
> </div>
> </div>
> </div>
>
>
>
> <div class="tab-pane" id="Five">
> <div class="tabbable">
> <div class="tab-content" style="padding: 10px;">
> <div class="tab-pane active" id="FiveA">
> <div class="row">
> <div class="col-md-12">
> <div id="geochart4" align="center" display= 'inline-block'></div>
> </div>
> </div>
> </div>
> </div>
> </div>
> </div>
>
>
> <div class="tab-pane" id="Six">
> <div class="tabbable">
> <div class="tab-content" style="padding: 10px;">
> <div class="tab-pane active" id="SixA">
> <div class="row">
> <div class="col-md-12">
> <div id="geochart5" align="center" display= 'inline-block'></div>
> </div>
> </div>
> </div>
> </div>
> </div>
> </div>
>
>
>
> <script type="text/javascript">
> google.charts.load('current', {'packages':['geochart'],'mapsApiKey':
> 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'});
>
>
> google.charts.setOnLoadCallback(drawMap);
> function drawMap() {
>
>
>
> var dataD = google.visualization.arrayToDataTable([
> ['States', '2018 Departures'],
> ['Alabama', 2],
> ['Arizona', 17],
> ['Arkansas', 8],
> ['California', 67],
> ['Colorado', 9],
>
>
> ]);
>
> var dataE = google.visualization.arrayToDataTable([
> ['States', '2018 Destinations'],
> ['Alabama', 1],
> ['Arizona', 8],
> ['Arkansas', 11],
> ['California', 8],
> ['Colorado', 4],
>
> ]);
>
> var dataF = google.visualization.arrayToDataTable([
> ['States', '2018 Combined Activity'],
> ['Alabama', 3],
> ['Arizona', 25],
> ['Arkansas', 19],
> ['California', 75],
> ['Colorado', 13],
>
> ]);
>
> var optionsD = {
> region: 'US',
> displayMode: 'regions',
> resolution: 'provinces',
> backgroundColor: { fill:'transparent' },
> colorAxis: {colors: ['#D53E4F', '#F46D43', '#FDAE61', '#FEE08B',
> '#E6F598', '#ABDDA4', '#66C2A5', '#3288BD']},
> datalessRegionColor: '#D3D3D3',
> };
>
> var optionsE = {
> region: 'US',
> displayMode: 'regions',
> resolution: 'provinces',
> backgroundColor: { fill:'transparent' },
> colorAxis: {colors: ['#D53E4F', '#F46D43', '#FDAE61', '#FEE08B',
> '#E6F598', '#ABDDA4', '#66C2A5', '#3288BD']},
> datalessRegionColor: '#D3D3D3',
> };
>
> var optionsF = {
> region: 'US',
> displayMode: 'regions',
> resolution: 'provinces',
> backgroundColor: { fill:'transparent' },
> colorAxis: {colors: ['#D53E4F', '#F46D43', '#FDAE61', '#FEE08B',
> '#E6F598', '#ABDDA4', '#66C2A5', '#3288BD']},
> datalessRegionColor: '#D3D3D3',
> };
>
>
> var chartD = new
> google.visualization.GeoChart(document.getElementById('geochart3'));
> var chartE = new
> google.visualization.GeoChart(document.getElementById('geochart4'));
> var chartF = new
> google.visualization.GeoChart(document.getElementById('geochart5'));
>
>
> chartD.draw(dataD, optionsD);
> chartE.draw(dataE, optionsE);
> chartF.draw(dataF, optionsF);
>
> }
> </script>
> </html>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/c50e6152-d045-481d-b454-7d20f1f91c8c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
