JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
    </head>
    <body>
        <input type="text" id="address" placeholder="street" style="width: 500px;"></input>
        <input type="text" placeholder="suburb/city" id="suburb" style="width: 500px;"></input>
        <input type="text" placeholder="state" id="state" style="width: 500px;"></input>
        <input type="text" placeholder="zip" id="zip" style="width: 500px;"></input>
        <input type="text" placeholder="country" id="country" style="width: 500px;"></input>
        
        <div id="map_canvas" style="width: 455px; height: 258px;"></div>
    </body>
</html>

JavaScript

var defaultBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(33.89028890,-117.5617340),
            new google.maps.LatLng(33.7706850,-117.6639850));
    
    var updateAddress = {

    autocomplete: new google.maps.places.Autocomplete($("#address")[0], {bounds: defaultBounds, types: ['geocode'], componentRestrictions: {country: 'us'}}),
        

        
    event: function(){
        var self = this;    
        google.maps.event.addListener(self.autocomplete, 'place_changed', function() {
            var place = self.autocomplete.getPlace(),
                address = place.address_components,
                streetAddress = '',
                suburb = '',
                state = '',
                zip = '',
                country = '';

            for (var i = 0; i < address.length; i++) {
                var addressType = address[i].types[0];

                if (addressType == 'subpremise') {
                    streetAddress += address[i].long_name + '/';
                }
                if (addressType == 'street_number') {
                    streetAddress += address[i].long_name + ' ';
                }
                if (address[i].types[0] == 'route') {
                    streetAddress += address[i].long_name;
                }
                if (addressType == 'locality') {
                    suburb = address[i].long_name;
                }
                if (addressType == 'administrative_area_level_1') {
                    state = address[i].long_name;
                }
                if (addressType == 'postal_code') {
                    zip = address[i].long_name;
                }
                if (addressType == 'country') {
                    country = address[i].long_name;
                }
            }
            
            // update the textboxes
            setTimeout(function(){$('#address').val(streetAddress);},50);
            $('#suburb').val(suburb);
            $('#state').val(state);
     ...