JSFiddle - React, Tailwind, and code Playground

by Helmut Granda

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src='http://maps.google.com/maps/api/js?sensor=false'> </script>
<div id="panel" style="margin-left:0px">
    <input type="button" value="Toggle Border" onclick = "toggleBorder();" ></input>
    <input type="button" value="Toggle Class" onclick = "toggleFill();" ></input>
    <input type="button" value="Toggle density" onclick = "toggleMap('density');" ></input>
    
    <input type="button" value="Toggle URC Data" onclick = "toggleMap('ucrdata');" ></input>
    <input type="button" value="Toggle Census Male" onclick = "toggleMap('censusmale');" ></input>
    
    <input type="button" value="Toggle Census Female" onclick = "toggleMap('censusfemale');" ></input>
</div>
<div id="map-canvas" style="display: block; height: 700px;width: 700px;"></div>

CSS

#map-canvas{
    height: 700px;
    width: 700px;
}

JavaScript

var map;

function initialize() {
    // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#EDEDED" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { hue: "#EDEDED" },
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

 // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(31.968599, -99.901813),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

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

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
    
    border = new google.maps.FusionTablesLayer({
        map: map,
        query: {
            select: "class",
            from: "1OCjD3eOBmrleB0cTltpLjaqGtEROAAwq2YLp5kY",
            where: ""
        },
        styleId: 12,
        templateId: 13,
        
        styles: [{
          polygonOptions: {
              strokeOpacity: 0.3,
              fillOpacity: 0.1,
              fillColor: "#cccccc"
      }
    } ]
    });
    
    /*
    google.maps.event.addListener(border, 'click', function() {
        console.log ("MAP");
        console.log(this);
        this.setOptions({fillOpacity: 0.01});
        //map.setZoom(8);
        //map.setCenter(marker.getPosition());
  });*/
    


}

function toggleMap(mapName){
  if (this[mapName].map == null)
   ...