JSFiddle - React, Tailwind, and code Playground

by heriberto perez

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<p style="font-size: 125%; line-height: 25px">
    City/Zip:
    <input id="zip" type="text">
    <input id='get-state' type="submit" value="Get State!">   
    <br> State:
    <span id="state" style="font-weight: bold">ddddd</span>
</p>

JavaScript

var geocoder = new google.maps.Geocoder();

$('#get-state').on('click', function(){
  geocoder.geocode( { 'address': $('#zip').val() }, function (result, status) {
        var state = "N/A";
        console.log(result);
        console.log(status);
        for (var component in result[0]['address_components']) {
            for (var i in result[0]['address_components'][component]['types']) {
                if (result[0]['address_components'][component]['types'][i] == "administrative_area_level_1") {
                    state = result[0]['address_components'][component]['short_name'];
                    // do stuff with the state here!
                    document.getElementById('state').innerHTML = state;
                    return;
                }
            }
        }
    });  
});