JSFiddle - React, Tailwind, and code Playground

by adamehirsch

HTML

<SCRIPT TYPE = "text/javascript"
SRC = "http://maps.googleapis.com/maps/api/js?sensor=false"> </SCRIPT>   
<DIV ID="map-canvas"></DIV>
    <SELECT ID="selector"> </SELECT>

CSS

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

JavaScript

var RACE_STYLES = {
    'G': [{
        'color': '#660000',
        'race': 'Governor'}],
    'L': [{
        'color': '#006600',
        'race': 'Lt. Governor'}],
    'Z': [{
        'color': '#000066',
        'race': 'State Senate'}],
}

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

function initialize() {
    var 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
        },
    });

    var layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: '173CovMDpzEwyBBtF2fwkxHB5nt6zETzBzG-3YLE'
        }
    });

    layer.setMap(map);

    initSelectmenu();
    for (column in RACE_STYLES) {
        break;
    }
    applyStyle(map, layer, column);

    google.maps.event.addDomListener(document.getElementById('selector'), 'change', function() {
        var selectedColumn = this.value;
        applyStyle(map, layer, selectedColumn);
    });

    // Initialize the drop - down menu to select counties with that Race

    function initSelectmenu() {
        var selectMenu = document.getElementById('selector');

        // Hoo, boy, this was a little gnarly to dig through.
        // Iterate over each item in the RACE_STYLES object
        for (column in RACE_STYLES) {
            // create a selector option
            var option = document.createElement('option');
            // set the value of that option to the item name -- in this case, a single
            // letter corresponding to the AP Office_ID
         ...