title: How to add extra result with google map api autocomplete?
body: <p>Generally if we use Google map autocomplete it returns 5 rows. For example if we type <strong>dfw</strong> the google autocomplete will display the following output:
  <a href="https://i.stack.imgur.com/AhANe.png" rel="nofollow"><img src="https://i.stack.imgur.com/AhANe.png" alt="enter image description here"></a></p>
  
  <p>How can I add extra result with this Google map autocomplete result? I want to add extra row with the result. Expected output is given bellow: </p>
  
  <p><a href="https://i.stack.imgur.com/yXQ07.png" rel="nofollow"><img src="https://i.stack.imgur.com/yXQ07.png" alt="enter image description here"></a></p>
  
  <p>I am using google map JavaScript API.
      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'
      };</p>
  
  <pre><code>function initAutocomplete() {
      // Create the autocomplete object, restricting the search to geographical
      // location types.
      autocomplete = new google.maps.places.Autocomplete(
          (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());
          });
      }
  }
  </code></pre>
  
  <p>HTML is:
  </p>
  
  <pre><code>&lt;input id="street_number" name="street_number" type="hidden" /&gt;
  &lt;input id="route" name="route" type="hidden" /&gt;
  &lt;input id="locality" name="locality" type="hidden" /&gt;
  &lt;input id="administrative_area_level_1" name="administrative_area_level_1" type="hidden" /&gt;
  &lt;input id="country" name="country" type="hidden" /&gt;
  &lt;input id="postal_code" name="postal_code" type="hidden" /&gt;
  &lt;input id="autocomplete" type="text" placeholder="Enter your address" onFocus="geolocate()" /&gt;
  </code></pre>