title: Using google.charts.load once time for multiple chart types
body: <p>I want to make a plugin with google chart, like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function (global) {
      'use strict';
  
      if (!global.google || !global.google.charts) {
          let s = document.createElement('script');
          s.src = `//www.gstatic.com/charts/loader.js`;
  
          document.head.appendChild(s);
      }
  
      let google = {};
  
      google.ready = function (_) {
          let t = setInterval(function () {
              if (global.google &amp;&amp; global.google.charts) {
                  clearInterval(t);
  
                  _.call(global.google);
              }
          }, 1);    
      };
  
      let chart = (function () {
          let _selector = Symbol('GoogleChart');
  
          class GoogleChart {
              constructor(selector) {
                  this[_selector] = selector;
              }
              CoreChart(options = {}) {
                  let _this = this, selector = document.getElementById(_this[_selector]);
  
                  let init = function () {
                      let google = this;
  
                      let drawChart = function () {
  
                          let O = {
                              width: options.width || 500,
                              height: options.height || 500,
                              legend: options.legend || {},
                              pointSize: options.pointSize || 1,
                              vAxis: options.vAxis || {},
                              hAxis: options.hAxis || {},
                              series: options.series || {},
                              colors: options.colors || [],
                              lineWidth: options.lineWidth || 2
                          };
  
                          let data = new google.visualization.DataTable();
  
                          if (!options.data || !options.data.columns || !options.data.rows) throw `Missing 'data'. No data to display in the chart.`;
                          
                          for (let column in options.data.columns) data.addColumn(column, options.data.columns[column]);
  
                          if (options.tooltip &amp;&amp; options.tooltip.type) {
                              let tooltip = {
                                  type: options.tooltip.type,
                                  role: 'tooltip'
                              };
  
                              if (options.tooltip.isHtml) {
                                  tooltip.p = {
                                      html: true
                                  };
                                  
                                  O.tooltip = {
                                      isHtml: true
                                  };
                              }
  
                              data.addColumn(tooltip);
                          }
  
                          data.addRows(options.data.rows);
                          
                          //
                          let chart = new google.visualization.LineChart(selector);
  
                          //
                          chart.draw(data, O);
                      };
  
                      google.charts.load('current', { packages: ['corechart'] });
                      google.charts.setOnLoadCallback(drawChart);
                  };
  
                  //
                  google.ready(init);
              }
          }
          return GoogleChart;
      }());
          
      global.GoogleChart = chart;
  }(window));
  
  
  
  
  
  // USAGE:
  
  
  
  
  
  let chart = new GoogleChart('line');
  chart.CoreChart({
      width: 500,
      height: 200,
      data: {
          columns: {
              'string': 'Date',
              'number': 'Date'
          },
          rows: [
              ['1', 2],
              ['', 7],
              ['3', 3],
              ['', 9],
              ['5', 3],
              ['', 1],
              ['7', 4],
              ['', 6],
              ['9', 3],
              ['', 5],
              ['11', 8],
              ['', 2],
              ['13', 1],
              ['', 0],
              ['15', 8]
          ]
      },
      legend: {
          position: 'top'
      },
      series: {
          0: {
              color: '#f00',
              lineDashStyle: [2, 2, 20, 2, 20, 2]
          }
      },
      pointSize: 3
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="line"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works fine with only 1 chart type (<code>CoreChart</code>). Now, I want to support more chart types (<a href="https://developers.google.com/chart/interactive/docs/gallery/geochart" rel="nofollow noreferrer">Geo chart</a>, <a href="https://developers.google.com/chart/interactive/docs/gallery/map" rel="nofollow noreferrer">Map chart</a>).</p>
  
  <pre><code>let chart1 = new GoogleChart(selector1);
  chart1.GeoChart(options);
  
  let chart2 = new GoogleChart(selector2);
  chart2.MapChart(options);
  </code></pre>
  
  <p>I notice <a href="https://developers.google.com/chart/interactive/docs/basic_load_libs#limitations" rel="nofollow noreferrer">the Limitations:</a></p>
  
  <blockquote>
    <p>You can only call <strong>google.charts.load</strong> <em>once</em>. But you can list all the packages that you'll need in one call, so there's no need to make separate calls.</p>
  </blockquote>
  
  <p>So, my plugin doesn't know exactly the chart type until it's called (<code>.GeoChart</code> or <code>.MapChart</code>). If there are multiple charts on a page, how to draw it?</p>
  
  <p>If I do this:</p>
  
  <pre><code>google.charts.load('current', { packages: ['corechart', 'geochart', 'map'] });
  </code></pre>
  
  <p>and there is no <code>GeoChart</code> or <code>MapChart</code> called, that would be wasting (spending time to load the unused charts).</p>
  
  <p>Any idea? Thank you!</p>