JSFiddle - React, Tailwind, and code Playground

by glam

HTML

<html>

  <head>
    <meta charset="utf-8">
    <title>Geochart GeoJSON example page</title>

   
  </head>

  <body>
    <div id="mydiv" style="width: 900px; height: 560px;"></div>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuzwI2s2bf2lDglKewNMEvqeF_nqVvouE"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/rarylson/geochart-geojson/build/geochart-geojson.min.js"></script>

    <script type="text/javascript">
      google.charts.load("current");
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {

        // Create and populate a data table
        var data = new google.visualization.DataTable();
        data.addColumn("string", "City");
        data.addColumn("number", "Value");
        data.addRows([
          ["Rio de Janeiro", 10],
          ["Maricá", 5],
          ["São João de Meriti", 2],
          ["Niterói", 1],
          ["São Gonçalo", 1]
        ]);

        // Instantiate our Geochart GeoJSON object
        var vis = new geochart_geojson.GeoChart(document.getElementById("mydiv"));

        // Set Geochart GeoJSON options
        var options = {
          mapsOptions: {
            center: {
              lat: -22.15,
              lng: -42.9
            },
            zoom: 8
          },
          geoJson: "http://msukorejo.jumatlegi.com/assets/rio-state.geojson",
          geoJsonOptions: {
            idPropertyName: "name"
          }
        };

        // Draw our Geochart GeoJSON with the data we created locally
        vis.draw(data, options);
      }

    </script>
  </body>

</html>