JSFiddle - React, Tailwind, and code Playground

by adamehirsch

HTML

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

<div style="margin-bottom: 10px;">
    <select id="search-string" onchange="changeMap(this.value);">
    <option value="1Qy-vTX9jfV_yqd3rZJvFIiXPz2el9TfEIbmxRCY">Governor</option>
    <option value="1Lpf5l2uC0AgIv96gbO6-iokWO5lRJcp1_Ja5zo4">Lt. Gov.</option>
    <option value="1-kiepouWHk_BUBzRonSwmJkrdiVuZgUBFKicuZY">Senate</option>
  </select>
</div>

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

CSS

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

JavaScript

var map;
var layer;
var govLayer;
var ltGovLayer;
var senLayer;

var govTable = '1Qy-vTX9jfV_yqd3rZJvFIiXPz2el9TfEIbmxRCY';
var ltGovTable = '1Lpf5l2uC0AgIv96gbO6-iokWO5lRJcp1_Ja5zo4';
var senTable = '1-kiepouWHk_BUBzRonSwmJkrdiVuZgUBFKicuZY';

//begin main function
    $(document).ready(function() {
        initialize();
    });
//end main function


function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(44.824708, -89.780273),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        draggable: true,
        mapTypeControl: false,
        navigationControl: true,
        panControl: false,
        scrollwheel: false,
        streetViewControl: false,
        scaleControl: true,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
    });
    
    //set initial layer to the gov map
    layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: govTable
        }
    });

    layer.setMap(map);

}
//end write map

//begin change layer
function changeMap() {
    var searchString = document.getElementById('search-string').value;

    //console.log(searchString);

    //clear the layer
    layer.setMap();

    //set initial layer to the gov map
    layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: searchString
        }
    });

    layer.setMap(map);
}
//end change layer