title: Uncaught TypeError: Cannot set property 'value' of null
body: <p>I keep getting that error on the fillInAddress function.</p>
  
  <p>This is my form html:</p>
  
  <pre><code>&lt;div id="locationField"&gt;
    &lt;input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" width="500px"&gt;&lt;/input&gt;
  &lt;/div&gt;
  
  &lt;form accept-charset="UTF-8" action="/jobs" class="new_job" id="new_job" method="post"&gt;
    &lt;div class="field"&gt;
      &lt;label for="job_address"&gt;Customer&lt;/label&gt;&lt;br&gt;
      &lt;input id="customer" name="job[address]" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;label for="job_address"&gt;Address&lt;/label&gt;&lt;br&gt;
      &lt;input disabled="disabled" id="street_name" name="job[address]" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;label for="job_route"&gt;Route&lt;/label&gt;&lt;br&gt;
      &lt;input disabled="disabled" id="route" name="job[route]" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;label for="job_city"&gt;City&lt;/label&gt;&lt;br&gt;
      &lt;input disabled="disabled" id="locality" name="job[city]" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;label for="job_state"&gt;State&lt;/label&gt;&lt;br&gt;
      &lt;input disabled="disabled" id="administrative_area_level_1" name="job[state]" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;label for="job_postal_code"&gt;Postal code&lt;/label&gt;&lt;br&gt;
      &lt;input disabled="disabled" id="postal_code" name="job[postal_code]" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;label for="job_country"&gt;Country&lt;/label&gt;&lt;br&gt;
      &lt;input disabled="disabled" id="country" name="job[country]" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;input name="commit" type="submit" value="Create Job" /&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And my JS:</p>
  
  
  
  
  
  <pre><code>    &lt;script&gt;
  // 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'] });
    // 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();
  
    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;
      }
    }
  }
  // [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 geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(
            position.coords.latitude, position.coords.longitude);
        autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
            geolocation));
      });
    }
  }
  // [END region_geolocation]
  
      &lt;/script&gt;
  </code></pre>
  
  <p>The form fields are supposed to populate when I select a result from the autocomplete input field. However, that's not happening. When I directly cut and paste the code from here <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform</a>, it work's fine.</p>