Rails google places api address autocomplete. Pass address values into @model
<p>I need to pass the address values such as address, city, postal code , etc. To my @model where I have fields to accomodate the values. </p>

<p>I have been struggling trying many different things, including some ajax that looked like chinese..... , the last 3 days. I need help. If you have the time, there seems to be many people struggling with the same. Id love if someone could provide a complete solution/tutorial. </p>

<p>Auto-completes works fine, populating the google fields with the different element values. I thought I could use erb hidden_fields and assign the html values to my erb form fields but I cant get it to work.  </p>

<p>Inside my regular erb form i have the Google Places API web form: </p>

<pre><code>Start Address auto-complete 
&lt;style&gt;
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
&lt;/style&gt;
&lt;link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"&gt;
&lt;style&gt;
  #locationField, #controls {
    position: relative;
    width: 480px;
  }
  #autocomplete {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 99%;
  }
  .label {
    text-align: right;
    font-weight: bold;
    width: 100px;
    color: #303030;
  }
  #address {
    border: 1px solid #000090;
    background-color: #f0f0ff;
    width: 480px;
    padding-right: 2px;
  }
  #address td {
    font-size: 10pt;
  }
  .field {
    width: 99%;
  }
  .slimField {
    width: 80px;
  }
  .wideField {
    width: 200px;
  }
  #locationField {
    height: 20px;
    margin-bottom: 2px;
  }
&lt;/style&gt;


&lt;div id="locationField"&gt;
  &lt;input id="autocomplete" placeholder="Enter your address"
         onFocus="geolocate()" type="text"&gt;&lt;/input&gt;
&lt;/div&gt;

&lt;table id="address"&gt;
  &lt;tr&gt;
    &lt;td class="label"&gt;Calle&lt;/td&gt;
    &lt;td class="slimField"&gt;&lt;input class="field" id="street_number"
          disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
    &lt;td class="wideField" colspan="2"&gt;&lt;input class="field" id="route"
          disabled="true"&gt;&lt;/input&gt;
          &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class="label"&gt;Ciudad&lt;/td&gt;
    &lt;td class="wideField" colspan="3"&gt;&lt;input class="field" id="locality"
          disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class="label"&gt;Provincia&lt;/td&gt;
    &lt;td class="wideField" colspan="3"&gt;&lt;input class="field" id="administrative_area_level_2"
          disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td class="label"&gt;subloc&lt;/td&gt;
    &lt;td class="wideField" colspan="3"&gt;&lt;input class="field" id="sublocality"
          disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td class="label"&gt;geocode&lt;/td&gt;
    &lt;td class="wideField" colspan="3"&gt;&lt;input class="field" id="geocode"
          disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td class="label"&gt;neighborhood&lt;/td&gt;
    &lt;td class="wideField" colspan="3"&gt;&lt;input class="field" id="neighborhood"
          disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class="label"&gt;street address&lt;/td&gt;
    &lt;td class="wideField" colspan="3"&gt;&lt;input class="field" id="street_address"
          disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td class="label"&gt;&lt;/td&gt;
    &lt;td class="slimField"&gt;&lt;input class="field"
          id="administrative_area_level_1" disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
    &lt;td class="label"&gt;Codigo Postal&lt;/td&gt;
    &lt;td class="wideField"&gt;&lt;input class="field" id="postal_code"
          disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class="label"&gt;Pais&lt;/td&gt;
    &lt;td class="wideField" colspan="3"&gt;&lt;input class="field"
          id="country" disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;


 &lt;!-- 
  // This example displays an address form, using the autocomplete feature
  // of the Google Places API to help users fill in the information.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // &lt;script src="https://maps.googleapis.com/maps/api/js?key=[MY_KEY]&amp;libraries=places"&gt;&lt;/script&gt;
--&gt;

  &lt;script type="text/javascript"&gt;
  var placeSearch, autocomplete;
  var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    administrative_area_level_2: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    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 &lt; 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;
      }
    }
  }

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
&lt;/script&gt;



&lt;script src="https://maps.googleapis.com/maps/api/js?key=[MY_KEY]&amp;libraries=places&amp;callback=initAutocomplete"
    async defer&gt;&lt;/script&gt;


&lt;!-- End Address auto-complete --&gt;
</code></pre>