title: How to clear search input field with javascript when using Google Maps v3 Autocomplete Form
body: <p>I am using Google maps v3 api to autocomplete an address form but I do not want to use a general search field like in the example (<a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/full/places-autocomplete-addressform" rel="nofollow noreferrer">https://google-developers.appspot.com/maps/documentation/javascript/examples/full/places-autocomplete-addressform</a>).</p>
  
  <p>I am trying to make the street address field the search field as well as the <strong>street number and street name field only</strong>. I found this example on JS fiddle (<a href="https://jsfiddle.net/smartystreets/0c9fy73v/" rel="nofollow noreferrer">https://jsfiddle.net/smartystreets/0c9fy73v/</a>) I cannot replicate it.</p>
  
  <p>I tried turning autocomplete=off but does not work on chrome (for elementId('autocomplete'))</p>
  
  <p>I tried hiding the route and street input elements and setting the input id value to empty. </p>
  
  <pre><code>document.getElementById('autocomplete').value = ''; 
  </code></pre>
  
  <p>Then using the hidden input fields to rebuild that form input w/ </p>
  
  <pre><code>document.getElementById('autocomplete').value = document.getElementById('street_number') + ' ' + document.getElementById('route');
  </code></pre>
  
  <p>Any ideas what I am doing wrong? Why wont the search field clear? </p>
  
  <p>This is my HTML for my search/address field:</p>
  
  <pre><code>&lt;!-- address --&gt;
     &lt;div class="col-md-6 col-lg-6"&gt;
        &lt;label class="light text-capitalize"&gt;address:&lt;/label&gt;
        &lt;input type="text"   id="autocomplete"
           name="street" placeholder="Street address, PO Box, etc."&gt;
        &lt;input type="hidden" id="route" disabled="false"&gt;
        &lt;input type="hidden" id="street_number" disabled="false"&gt; 
        &lt;input type="text"  name="address1" placeholder="(Optional) Apartment, Suite, Floor, etc."&gt;
     &lt;/div&gt;
  &lt;!-- address end --&gt;
  </code></pre>
  
  <p>This is my inline JS</p>
  
  <p></p>
  
  <pre><code>  var placeSearch, autocomplete;
    var componentForm = {
       street_number: 'short_name',
       route: 'long_name',
       locality: 'long_name',
       administrative_area_level_1: 'short_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('street_number').value = '';
      document.getElementById('route').value = '';
      document.getElementById('locality').value = '';
      document.getElementById('administrative_area_level_1').value = '';
  //  document.getElementById('country').value = '';
      document.getElementById('postal_code').value = '';
  
      }
  
      // 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;
  </code></pre>