JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

<div>
      <input id="searchTextField" type="text" value="comocomo brussels" size="50">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label>

      <input type="radio" name="type" id="changetype-establishment">
      <label for="changetype-establishment">Establishments</label>

      <input type="radio" name="type" id="changetype-geocode">
    </div>
    <div id="map_canvas"></div>

CSS

body {
        font-family: sans-serif;
        font-size: 14px;
      }

#map_canvas {
    height: 400px;
    width: 600px;
    margin-top: 0.6em;
  }

input {
    border: 1px solid  rgba(0, 0, 0, 0.5);
  }

input.notfound {
    border: 2px solid  rgba(255, 0, 0, 0.4);
  }

JavaScript

jQuery(document).ready(function($){
    
   
$("#searchTextField").keyup(function(event){
    if(event.keyCode == 13){
        selectFirstResult();
    }
});
                                 
function selectFirstResult() {
    infowindow.close();
    var firstResult = $(".pac-container .pac-item:first").text();

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({"address":firstResult }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var lat = results[0].geometry.location.lat(),
                lng = results[0].geometry.location.lng(),
                placeName = results[0].address_components[0].long_name,
                latlng = new google.maps.LatLng(lat, lng);

            moveMarker(placeName, latlng);
            $("input").val(firstResult);
        }
    });   
 }
    
});

    
function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-33.8688, 151.2195),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
          map: map
        });

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          infowindow.close();
          marker.setVisible(false);
          input.className = '';
          var place = autocomplete.getPlace();
          if (!place.geometry) {
            // Inform the user that the place was not found and return.
            input.className = 'notfound';
            return;
          }

          // If the place has a geometry, then present it on a map.
          if (place.geometry.viewport) {
         ...