Polymer Template

by Wes Alvaro

HTML

<base href="https://cdn.rawgit.com/StartPolymer/cdn/1.8.1/components/">
<link rel="import" href="google-chart/google-chart-loader.html">
<link rel="import" href="google-chart/google-chart.html">

<h1>Google-Chart with Maps API Key</h1>

<google-chart
    type="geo"
    data='[["Country", "Pop"],["America", 2], ["Japan", 1]]'>
</google-chart>

<script>
document.body.addEventListener('loaded', () => {
  console.log('Google Visualization API loaded.');
  google.visualization.mapsApiKey = 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY';
});
</script>

CSS

body {
  font-family: 'Roboto', 'Noto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  margin: 24px 0;
}

JavaScript

// Load webcomponents.js polyfill if browser doesn't support native Web Components.
var webComponentsSupported = (
  'registerElement' in document
  && 'import' in document.createElement('link')
  && 'content' in document.createElement('template')
);

if (webComponentsSupported) {
	// For native Imports, manually fire WebComponentsReady so user code
  // can use the same code path for native and polyfill'd imports.
  if (!window.HTMLImports) {
    document.dispatchEvent(
      new CustomEvent('WebComponentsReady', {bubbles: true})
    );
  }
} else {
	// Load webcomponents.js polyfill
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://cdn.rawgit.com/StartPolymer/cdn/1.8.1/components/webcomponentsjs/webcomponents-lite.min.js';
  document.head.appendChild(script);
}