JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Chesapeake Bay Nutria Eradication Sightings Map</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="C:\Users\rjhewitt\Desktop\GoogleMaps\CSS\style.css"/>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css"/>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    </head>
    <body>
        <div id="map_canvas"></div> 
    </body>
</html>

CSS

h1, h2, h3 {
font: Georgia, Serif;
}

html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}
form {
    margin:0;
    padding:0;
    text-align:right;
}
fieldset {
    clear:both;
    font-family: Helvetica;
    font-size: .8em;
    font-weight: bold;
    color:#182886;
    border: 2px solid #182886;
    white-space: nowrap;
    background-color:#FFFFED;
}
form.p{
    float:left;
    margin:0;
    padding:0;
}
label {
    margin-right:.4em;
    margin-left:.4em;
    margin-bottom:0;
}
input {
    padding:0;
    margin-right: 0 .4em 0 0;
}
textarea{
    width:17em;
    height:5em;
    margin:0 .4em 0 0;
}
#submitBtn {
    float:right;
    margin:.2em .4em .2em 0;
    padding:.3em;
}
#dos{
    float:left;
    margin-left:.5em;
}
#formDiv {
    overflow:auto;
}
.hide{
    display:hide;
}
.clear{
    clear:both;
}

JavaScript

// Global Variables
        var map,
        markerWindow,
        newMarker,
        contentString;
        // Google Maps info window form submit
        function postSighting() {
            $('#datepicker').datepicker({
                onSelect: function (dateStr)
                $('#application').validate().element(this);
            }
            });
        // jQuery Validate
        $('#htmlForm').validate({
            rules: {
                contact: {
                    required: true,
                    email: true
                },
                date: {
                    required: true,
                    date: true
                },
                lat: {
                    required: true
                },
                lng: {
                    required: true
                },
                desc: {
                    required: true
                },
            },
            messages: {
                desc: 'Please be descriptive!'
            },
            errorPlacement: function (error, element) {
                error.appendTo($('#' + element.attr('id') + 'P'));
                if (element.attr('id') == 'desc') {
                    error.css({
                        text_align: 'center',
                        color: 'red',
                        padding: 45,
                    });
                } else {
                    error.css({
                        color: 'red',
                        padding: 18,
                        margin: 0,
                    })
                };
            }
        });

        }

        function placeMarker() {
            // Setup html form markup for marker pop-up infowindow
            var contentString =
                '<div id="formDiv">' +
                '<form action="addRow.php" method="post"id="htmlForm"> ' +
                '<fieldset> ' +
                '<p id="contactP">' +
                '<label for="contact">Email:</label>' +
                '<input...