Google Geo Chart

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="//www.gstatic.com/charts/loader.js"></script>

Copy-paste the following <script> near the end of your pages under JS Nova to enable it.

<script src="../../assets/js/components/hs.google-geo-chart.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of geo map
    $.HSCore.components.HSGoogleGeoChart.init('#map');
  });
</script>

Basic example

<!-- File Attach -->
<div class="position-relative embed-responsive embed-responsive-21by9">
  <div id="map" class="position-absolute w-100 h-100" style="top: 0;"
       data-api-key="AIzaSyAOLYM76-S8-pL-_OUrZAax2cQAtJjEQCg"
       data-data='[["Country", "Statistics"]]'></div>
</div>
<!-- End File Attach -->

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-api-key="".