JSFiddle - React, Tailwind, and code Playground

by PeteLopez

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function addMarkers() {
  //Print the map object out to the console
    console.log(map);
    map.setZoom(10);
};
</script>
<body onload='load()'>
    <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center" WIDTH=100%>
        <TR>
            <TD>
                <div id="map" style="width: 1250px; height: 750px"></div>
            </TD>
            <TD>
                <!--field for start-->
                <p>Start Date Time:</p>
                <form method="post" action="">
                    <input type="button" value="Search" onclick="addMarkers()">
                </form>
            </TD>
        </TR>
    </TABLE>
<script>
function load() {
    var myOptions = {
      center: new google.maps.LatLng(42, -70),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"),myOptions);
    alert("Click search to look for markers.");
    addMarkers()
}
load();
   //***************Function moved out of header***************************************************
    var map;
    var markersArray = [];
    var startformat;
    var endformat;
</script>

</body>