JSFiddle - React, Tailwind, and code Playground

by goughv

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places"></script>
<div class="form-group">
	<label class="control-label">Search Address</label>
	<input type="text" id="autocomplete" name="autocomplete" class="form-control" value="" placeholder="Address e.g.21 Spring Street, New York, USA" maxlength="1000">
</div>
<div class="form-group">
	<label class="control-label">Address 1</label>
	<input type="text" name="address1" id="street_number" value="" placeholder="" class="form-control" maxlength="250"/>
</div>
<div class="form-group">
	<label class="control-label">Address 2</label>
	<input type="text" name="address2" id="route" value="" placeholder="" class="form-control" maxlength="250"/>
</div>
<div class="form-group">
	<label class="control-label">City</label>
	<input type="text" name="city" id="locality" value="" placeholder="" class="form-control" maxlength="50"/>
</div>
<div class="form-group">
	<label class="control-label">State</label>
	<input type="text" name="state" id="administrative_area_level_1" value="" placeholder="" class="form-control" maxlength="50"/>
</div>
<div class="form-group">
	<label class="control-label">Zip Code</label>
	<input type="text" name="zip_code" id="postal_code" value="" placeholder="" class="form-control" maxlength="15"/>
</div>

JavaScript

$(function(){
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

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

function initialize() {
    // Create the autocomplete object, restricting the search
    // to geographical location types.
    autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */ (document.getElementById('autocomplete')), {
        //types: ['geocode']
        types: ['geocode', 'establishment']
    });
    // When the user selects an address from the dropdown,
    // populate the address fields in the form.
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        fillInAddress();
        
    });
    
}

// [START region_fillform]
function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();
    var formatted_address = place.formatted_address;

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

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    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;
        }
    }
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function...