JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div>     <input id="address" type="textbox" value="Mountain View,CA">     <input type="button" value="Geocode" onclick="codeAddress()">   </div> <div id="map_canvas" style="height:400px;"></div>

JavaScript

var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(37.421, -122.084
);
    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;
    geocoder.geocode( { 'address': address}, 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
        });
        //__________________________fetching city and state
        result=results[0].address_components;
          var info=[];
          for(var i=0;i<result.length;++i)
          {
              if(result[i].types[0]=="administrative_area_level_1"){info.push(result[i].long_name)}
              if(result[i].types[0]=="locality"){info.unshift(result[i].long_name)}
          }
          alert(info.join(','));
          //_________________________done
            
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }