Google Place Autocomplete Address Form combine street_number and route fields

Question

I am setting up an address verification system on a web application I am currently creating using the Google Javascript API autocomplete. The system works great. You start to type the address then click the full address and the fields are completed. When the field are completed, they are shown in , each with a unique identifier for each part of the address.

Currently, the build number is displayed in a separate field to the address (i.e. Building Number: 101 Road Name: Test Avenue). I want to change this so that the building number and road name are combined (i.e. Address: 101 Test Avenue).

Here is the code that fills in the input fields

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'
    };

street_number refers to the building number and route refers to the road name.

I have tried combining as per below but it outputs 'undefined'. Please could someone help.

var componentForm = {
      street_number: 'short_name long_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'short_name',
      country: 'long_name',
      postal_code: 'short_name'
};

Fiddle with the undefined issue

geocodezip · Accepted Answer

One option is to change the code that fills in the form to capture the two pieces of data you want to combine, then combine them into the desired field in the form.

proof of concept fiddle

code snippet combining the street_number and route fields:

// 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 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);
}

// [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.
    var fullAddress = [];
    for (var i = 0; i < 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;
      }
      if (addressType == "street_number") {
        fullAddress[0] = val;
      } else if (addressType == "route") {
        fullAddress[1] = val;
      }
    }
    document.getElementById('fullAddr').value = fullAddress.join(" ");
    if (document.getElementById('fullAddr').value !== "") {
      document.getElementById('fullAddr').disabled = false;
    }
  }
  // [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 = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
  // [END region_geolocation]
google.maps.event.addDomListener(window, 'load', initAutocomplete)

#locationField,
#controls {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}
.label {
  text-align: right;
  font-weight: bold;
  width: 150px;
  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;
}
.doubleField {
  width: 400px;
}
#locationField {
  height: 20px;
  margin-bottom: 2px;
}



  



  
    Street address
    
      
    
    
      
    
  
  
    Full Street address
    
      
    
  
  
    City
    
      
    
  
  
    State
    
      
    
    Zip code
    
      
    
  
  
    Country

Google Place Autocomplete Address Form combine street_number and route fields

Answers (1)

Related Questions