title: Rails google places api address autocomplete. Pass address values into @model
body: <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>