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 Fill" onclick = "toggleStreetView();" ></input>
    <input type="button" value="Toggle Income" onclick = "toggleMap('income');" ></input>
    <input type="button" value="Toggle f2024" onclick = "toggleMap('f2024');" ></input>
    <input type="button" value="Toggle density" onclick = "toggleMap('density');" ></input>
    <input type="button" value="Toggle sclass" onclick = "toggleMap('sclass');" ></input>
</div>
<div id="map-canvas" style="display: block; height: 400px;width: 400px;"></div>

CSS

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

JavaScript

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']
    }
  };

var 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');

    income = new google.maps.FusionTablesLayer({
        map: map,
        query: {
            select: "income",
            from: "1OCjD3eOBmrleB0cTltpLjaqGtEROAAwq2YLp5kY",
            where: ""
        },
        styleId: 3
    });

    f2024 = new google.maps.FusionTablesLayer({
        map: map,
        query: {
            select: "f2024",
            from: "1OCjD3eOBmrleB0cTltpLjaqGtEROAAwq2YLp5kY",
            where: ""
        },
        styleId: 4
    });


    density = new google.maps.FusionTablesLayer({
        map: map,
        query: {
            select: "density",
            from: "1OCjD3eOBmrleB0cTltpLjaqGtEROAAwq2YLp5kY",
            where: ""
        },
        styleId: 5
    });

    border = new google.maps.FusionTablesLayer({
        map: map,
  ...