JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></script>
<div id="googlemap"></div>

<body onload="initialize()">
 <div id="map_canvas" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value=", NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>

CSS

#googlemap{
    margin:25px;
    height: 300px;
    width: 400px;
    background-color: #FFF;
    z-index: 1;
}

JavaScript

var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    if (geocoder) {
      geocoder.geocode( { 'address': fukuoka}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map, 
              position: results[0].geometry.location
          });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }