JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="panel">
   <input id="address" type="textbox" value="Vancouver downtown">
   <input type="button" value="Geocode" id="geocodeExample">
</div>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}

JavaScript

var geocoder;
var map;

$('#geocodeExample').click(function(e) {
    e.preventDefault();
    
    codeAddress();   
    
});

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
    
  var address = document.getElementById('address').value;
  
  getLatLng(address, function(value) {
    
     alert("ok: " + value);
    
  });
    
}

var getLatLng = function(stAddress, cb){

  geocoder.geocode( { 'address': stAddress}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      return cb(results[0].geometry.location);
    } else {
      return cb(-1);
    }
  });

}

initialize();