JSFiddle - React, Tailwind, and code Playground

by CodeMaverick

HTML

<html>
  <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   </head>
   <body>
     <div>
       <input id="address" type="textbox" value="Rochester, MN">
       <input type="button" value="Encode"
              onclick='codeAddress(document.getElementById("address").value)'> 
     </div>
     <div id="map_canvas" style="width: 320px; height: 480px;"></div>
     <script type="text/javascript">
       var geocoder;
       var map;
    
       function initialize() {
         geocoder = new google.maps.Geocoder();
         var address = "Rochester, MN";
         var latlng = codeAddress(address);
         var myOptions = {
           zoom: 8,
           center: latlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       }
    
       function codeAddress(address) {
         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
             });
           } else {
             alert("Geocode was not successful for the following reason: " + status); 
           }
         });
       }
    
       initialize();
     </script>
  </body>
</html>