JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<div class="field_box">
<div class="fieldwrapper">
<input id="location" class="field" placeholder="Town, City or Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Find" />
            <div id="geomap" style="width:100%; height:180px;">
            <p>Loading Please Wait...</p>
        </div>
        
        <input id="hidLat" name="hidLat" type="" value="">
        <input id="hidLong" name="hidLong" type="" value=""> 
</div></div>

CSS

.ui-autocomplete {
                background-color: white;
                width: 300px;
                border: 1px solid #cfcfcf;
                list-style-type: none;
                padding-left: 0px; font-family:Arial, Helvetica, sans-serif; cursor:pointer; font-size:12px;
            }
            .ui-menu-item {padding:3px 0;}

JavaScript

var PostCodeid = "#location";
var longval = "#hidLong";
var latval = "#hidLat";
var geocoder;
var map;
var marker;

function initialize() {
    //MAP
    var initialLat = $(latval).val();
    var initialLong = $(longval).val();
    if (initialLat == '') {
        initialLat = "51.773071843208115";
        initialLong = "-1.6568558468750325";
    }
    var latlng = new google.maps.LatLng(initialLat, initialLong);
    var options = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDoubleClickZoom: true,
        disableDefaultUI: true,
        keyboardShortcuts: true,
        draggable: false,
        scrollwheel: false,
        componentRestrictions: {country: "us"}         
    };

    var autocompleteOptions = {
        types: ['geocode']
    };

    map = new google.maps.Map(document.getElementById("geomap"), options);

    geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: latlng
    });

    google.maps.event.addListener(marker, "dragend", function(event) {
        var point = marker.getPosition();
        map.panTo(point);
    });

};

$(document).ready(function() {

    initialize();

    var options = {
                  componentRestrictions: {country: 'us'}
            };
    var input = document.getElementById('location');
        var autocomplete = new google.maps.places.Autocomplete(input,options);

    $('#findbutton').click(function(e) {
        var address = $(PostCodeid).val();
        geocoder.geocode({
            'address': address,
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                $(latval).val(marker.getPosition().lat());
                $(longval).val(marker.getPosition().lng());
            } else {
          ...