JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSBEG2eBkHa4FqsIG7rhFDl2SIIigjNUw&amp;libraries=places"></script>
<div ng-app="app">
  <form ng-controller="AddressController">
    <div class="control">
      <input type="text" id="autocomplete" placeholder="Enter your address">
    </div>

    <div ng-hide="address == null">
      <div class="control">
        <label for="street_number">Number or Name</label>
        <div>
          <input type="text" id="street_number" ng-model="address.street_number">
        </div>
      </div>

      <div class="control">
        <label for="route">Street</label>
        <div>
          <input type="text" id="route" ng-model="address.route">
        </div>
      </div>

      <div class="control">
        <label for="locality">Town or City</label>
        <div>
          <input type="text" id="locality" ng-model="address.locality">
        </div>
      </div>

      <div class="control">
        <label for="administrative_area_level_2">County</label>
        <div>
          <input type="text" id="administrative_area_level_2" ng-model="address.administrative_area_level_2">
        </div>
      </div>

      <div class="control">
        <label for="postal_code">Postcode</label>
        <div>
          <input type="text" id="postal_code" ng-model="address.postal_code">
        </div>
      </div>

      <div class="control">
        <label for="country">Country</label>
        <div>
          <input type="text" id="country" ng-model="address.country">
        </div>
      </div>
    </div>
  </form>
</div>

CSS

.control label, .control div {
  display: inline-block;
}

.control label {
  width: 25%;
}

JavaScript

var app = angular.module('app', []);

app.controller('AddressController', ['$scope', '$http', function ($scope, $http) {
	var defaultAddress = {
    street_number: '',
    route: '',
    locality: '',
    administrative_area_level_2: '',
    country: '',
    postal_code: ''
  };

	$scope = angular.extend($scope, {
  	address: defaultAddress
  });

  var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
  	types: ['geocode']
  });

	autocomplete.addListener('place_changed', updateAddress);
  
  var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_2: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

	function updateAddress() {
		var place = autocomplete.getPlace();
    
    $scope.address = null;
    
    var address = defaultAddress;

		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]];
        address[addressType] = val;
      }
    }
    
    $scope.address = address;
  };
}]);