JSFiddle - React, Tailwind, and code Playground

by Boyke Ferdinandes

HTML

<html>

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>Fusion Tables Layer Example: Mouseover Map Styles</title>
  </head>

  <body>

    <style type="text/css">
      #map-canvas {
        height: 800px;
        width: 1000px;
      }

    </style>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

    <div id="map-canvas"></div>

JavaScript

var map;

       function initialize() {
         var myOptions = {
           zoom: 6,
           center: new google.maps.LatLng(46.82, 8.00),
           mapTypeId: google.maps.MapTypeId.HYBRID
         };

         map = new google.maps.Map(document.getElementById('map-canvas'),
           myOptions);

         // Initialize JSONP request
         var script = document.createElement('script');
         var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
         url.push('sql=');
         //need to change the table & column name according to fusion table
         //province border fusion table 420419: https://fusiontables.google.com/data?docid=19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA#rows:id=1
         //country border fusion table 419167: https://fusiontables.google.com/data?docid=16CTzhDWVwwqa0e5xe4dRxQ9yoyE1hVt_3ekDFQ#rows:id=1       
         /*var query = "SELECT 'sovereignt', 'kml_4326' FROM " +
           "16CTzhDWVwwqa0e5xe4dRxQ9yoyE1hVt_3ekDFQ WHERE 'sovereignt' = 'Canada'";           */
         var query = "SELECT name_0, kml_4326 FROM " +
           "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA WHERE name_0 = 'Switzerland'";
         var encodedQuery = encodeURIComponent(query);
         url.push(encodedQuery);
         url.push('&callback=drawMap');
         url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
         script.src = url.join('');
         var body = document.getElementsByTagName('body')[0];
         body.appendChild(script);
       }

       function drawMap(data) {
         var rows = data['rows'];
         for (var i in rows) {
           if (rows[i][0] != 'Antarctica') {
             var newCoordinates = [];
             var geometries = rows[i][1]['geometries'];
             if (geometries) {
             //alert('multi');
               for (var j in geometries) {               
                 newCoordinates.push(constructNewCoordinates(geometries[j]));
               }
             } else {
            ...