Google Address Lookup With Formyoula Forms

// Initialize variables
var autocomplete;
var Search_address_field = '7022-4a6b-f6de';
var City = 'City';
var State = 'State/Province';
var Country = 'Country/Region';
var Street = 'Street';
var Street_Number = 'Street Number';
var Postal_Code = 'Postal code';
var Address = 'Address';
var API_Key = 'API KEY'

// Load google js library
if ( !window.autofill_script_loaded ) {
  var script = document.createElement( 'script' );
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?key='+formyoula.form_fields[API_Key].get('value')+'&callback=initAutocomplete&libraries=places&v=weekly';
  script.onload = function() {
    window.autofill_script_loaded = true;
    initAutocomplete();
  };
  document.body.appendChild( script );
} else {
  initAutocomplete();
}

function initAutocomplete() {
  var addressSearchField = document.querySelector( '#component-' + Search_address_field + ' .input_content' );
  // Create the autocomplete object
  autocomplete = new google.maps.places.Autocomplete( addressSearchField, {} );
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener( 'place_changed', fillInAddress );
}
// Function to fill address fields
function fillInAddress() {
  // Get places
  var place = autocomplete.getPlace();
  // Get address_components from the places
  var address_components = place.address_components;
  // Filter the address_components to create a new address object
  var new_components = {
    Postal_Code: [ 'postal_code' ],
    Street: [ 'street_address', 'route' ],
    Street_Number: [ 'street_number' ],
    State: [ 'administrative_area_level_1', 'administrative_area_level_2', 'administrative_area_level_3', 'administrative_area_level_4', 'administrative_area_level_5' ],
    City: [ 'locality', 'sublocality', 'sublocality_level_1', 'sublocality_level_2', 'sublocality_level_3', 'sublocality_level_4' ],
    Country: [ 'country' ]
  };
  // New address object
  var address = {
    Postal_Code: '',
    Street: '',
    State: '',
    City: '',
    Country: '',
    Street_Number: ''
  };
  // Loop through address components and create a simplified address object
  address_components.forEach( function( component ) {
    for ( var new_component in new_components ) {
      if ( new_components[ new_component ].indexOf( component.types[ 0 ] ) !== -1 ) {
        if ( new_component === 'Country' ) {
          address[ new_component ] = component.short_name;
        } else {
          address[ new_component ] = component.long_name;
        }
      }
    }
  } );
  // Set value of all the  address fields
  formyoula.form_fields[ City ].set( {
    value: address.City
  } );
  formyoula.form_fields[ State ].set( {
    value: address.State
  } );
  formyoula.form_fields[ Postal_Code ].set( {
    value: address.Postal_Code
  } );
  formyoula.form_fields[ Country ].set( {
    value: address.Country
  } );
  formyoula.form_fields[ Street ].set( {
    value: address.Street
  } );
  formyoula.form_fields[ Street_Number ].set( {
    value: address.Street_Number
  } );
  formyoula.form_fields[ Address ].set( {
    value: place.formatted_address
  } );
  formyoula.form_fields[ Search_address_field ].set( {
    value: place.formatted_address
  } );
  // Initialize the autocomplete after setting value to the search field
  initAutocomplete();
}