JSFiddle - React, Tailwind, and code Playground

by landsurveyors

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="map_canvas" style="width: 675px; height: 550px; float:left; border: 1px solid black;"></div>

<div id="main-chart-container" style="float:left; padding: 0; overflow-vertical:scroll; height: 550px; width:467px; border: 1px solid black; background-color: #F0F0F0;">
  <table width="444" border="0" cellpadding="5">
    <tr>
      <td width="174" align="left" valign="top"><span class="subtitle">Selectable Layers</span><div><span class="subtitle"></span>
          <p>
            <!-- Below is the code for the kml layers checkboxes: -->
            Show:
            <input type="checkbox" id="show_hide_Layer" />
            Magic Sites
            <p> Show:
              <input type="checkbox" id="show_hide_KML_Layer_Boundary" />
              Study Area
              <p> Show:
                <input type="checkbox" id="show_hide_KML_Layer_Wilderness" />
                Wilderness
                <p> Show:
                  <input type="checkbox" id="show_hide_KML_Layer_Nationalforest" />
                  Forest Service
                  <p>
                    <!-- Above is the code for the kml layers checkboxes: -->
                    </div></td>
      <td width="254" align="left" valign="top"><span class="subtitle">Title for Pie Chart</span><div id="visualization" style="float: left; width: 255px; border: 0px solid black;"></div><p>This can be a description of the pie chart data</p></td>
    </tr>
    <tr>
      <td align="left" valign="top"><div><span class="subtitle">Select Site Name or Click Point on Map</span>
        <p>
          <option value="Total"></option>
          </select>
          <label><strong>Site Name:</strong></label>
          <select name="Site" id="Site" style="color: #0000FF" onChange="changeMap(this.value);">
            <!-- I need to work on this changeMap function to be able to display only the point that is selected on the map -->
            <option value="Bear...

JavaScript

google.load('visualization', '1', {packages: ['corechart']});
google.load('maps', '3.9', {other_params: "sensor=false"});
google.setOnLoadCallback(initialize);

function initialize() {
    //var tableId = '1EBnmpo78yOktZvEmYNJ8L-W0vwYzIWxtxsky7HM';
    var myOptions = {
        center: new google.maps.LatLng(38.099983, -80.683594),
        zoom: 7,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE
        },
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.LEFT_TOP
        },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    var layer = new google.maps.FusionTablesLayer();
    updateLayerQuery(layer);
    layer.setMap(map);

    // added the click event handler for the "Magic Sites" checkbox here
    // if you set the other checkboxes' click events like this, then you
    // won't need to keep them outside the main function (as the comments below state)
    // Note: when doing this, DO NOT set the "onClick" property in HTML
    document.getElementById('show_hide_Layer').onclick = function() {
        var chkLayer = document.getElementById("show_hide_Layer");
        if (chkLayer.checked === true) {
            //Turn layer on
            layer.setMap(map);
        }
        else {
            //Turn layer off
            layer.setMap(null);
        }
    };
    
    var kmlLayerNationalforestURL = 'http://www.esenvironmental.com/kml/national_forests.kml';
    var kmlLayerWildernessURL = 'http://www.esenvironmental.com/kml/wilderness.kml';
    var kmlLayerBoundaryURL = 'http://www.esenvironmental.com/kml/study_region.kml';
    //<!-- preserveViewport prevents the map from...