JSFiddle - React, Tailwind, and code Playground

by spadez

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<body onload="initialize()">
     <h3>Location</h3>

    <input id="autocomplete" class="input" placeholder="Location" onFocus="geolocate()" type="text"></input>
    <input class="input hidden" id="route" disabled="true"></input>
    <input class="input hidden" id="locality" disabled="true"></input>
    <input class="input hidden" id="administrative_area_level_1" disabled="true"></input>
    <input class="input hidden" id="postal_code" disabled="true"></input>
    <input class="input hidden" id="country" disabled="true">
    <input class="input" type="submit">
</body>

CSS

.input {
    padding: 10px;
    width: 300px;
    display: block;
}
.hidden {
    border: 1px solid red;
}

JavaScript

var placeSearch, autocomplete;
var componentForm = {
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    country: 'long_name',
    postal_code: 'short_name'
};

function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
        types: ['geocode']
    });
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        fillInAddress();
    });
}

function fillInAddress() {
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
        }
    }
}