The Power of Geolocation in Simplifying Address Entry Form Autocompletion

Question

The Power of Geolocation in Simplifying Address Entry Form Autocompletion

I am facing a challenge with implementing Geolocation to automatically populate the address fields for my users. Specifically, I need assistance with (Mailing Address 1:) & (Physical Address 1:). Currently, the user addresses are displayed as they type, but once selected, I only want the Street Number and Street Address to appear in Mailing Address 1:, with the rest of the information (city, state, zip) filling in the corresponding fields and leaving Mailing Address 2: blank for apartment or suite details.

If the user selects that the physical and mailing addresses are identical, the autofill should mirror the process mentioned above.

If the addresses are different, I would like the same process to be followed.

Any assistance on this matter would be highly appreciated!

javascript geolocation

Answer 1

Answer №1

Give this a try,

It's working perfectly for me.

var placeSearch, autocomplete, autocomplete2;
var componentForm = {
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  postal_code: 'short_name'
};
var componentForm2 = {
  route2: 'long_name',
  locality2: 'long_name',
  administrative_area_level_12: 'short_name',
  postal_code2: 'short_name'
};

function initialize() {
  // Creating the autocomplete object with restrictions to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });
  autocomplete2 = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */
    (document.getElementById('autocomplete2')), {
      types: ['geocode']
    });
  // When an address is selected from the dropdown, populate the form fields.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
  google.maps.event.addListener(autocomplete2, 'place_changed', function() {
    fillInAddress2();
  });
}

// [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 < 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;
    }
  }
  document.getElementById('autocomplete').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];

  document.getElementById('route').value = '';
}

function fillInAddress2() {
    // Get the place details from the autocomplete object.
    var place = autocomplete2.getPlace();

    for (var component in componentForm2) {

      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 < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm2[addressType + '2']) {
        var val = place.address_components[i][componentForm2[addressType + '2']];
        document.getElementById(addressType + '2').value = val;
      }
    }
  document.getElementById('autocomplete2').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];

  document.getElementById('route2').value = '';
}
initialize();

document.querySelector('#chbSame').addEventListener('change', checkedAddr);


function checkedAddr() {
  if (document.getElementById('chbSame').checked) {
    document.getElementById('route2').value = document.getElementById('route').value;
    document.getElementById('locality2').value = document.getElementById('locality').value;
    document.getElementById('administrative_area_level_12').value = document.getElementById('administrative_area_level_1').value;
    document.getElementById('postal_code2').value = document.getElementById('postal_code').value;

document.getElementById('autocomplete2').value = document.getElementById('autocomplete').value;
  } else {
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <body onload="initialize()">
    <div id="locationField">
      <div class="clearfix">
    <label for="street_<cfoutput>#Add#</cfoutput>">Mailing Address 1:</label>
    <input type="text" name="street_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="autocomplete" size="54" maxlength="120" message="Please enter owner #Peoplecount#'s mailing address." onFocus="geolocate()" value="">
    </div>

    <div class="clearfix">
    <label for="m2street_<cfoutput>#Add#</cfoutput>">Mailing Address 2:</label>
    <input type="text" name="m2street_#Add#" validateat="onSubmit" required="no" validate="maxlength" id="route" size="54" maxlength="120" value="">
    </div>
      
    <div class="clearfix">
    <label for="city_<cfoutput>#Add#</cfoutput>">City:</label>
    <input type="text" name="city_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="locality" size="30" maxlength="50" message="Please enter owner #Peoplecount#'s mailing city." value="">
        </div>
        
        <div class="clearfix">
    <label for="state_<cfoutput>#Add#</cfoutput>">State:</label>
    <input type="text" name="state_#Add#" required="yes" id="administrative_area_level_1" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s mailing state." value="">
    </div>
            
            <div class="clearfix">
    <label for="street_<cfoutput>#Add#</cfoutput>">Zip Code:</label>
    <input type="text" name="postal_#Add#" required="yes" id="postal_code" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s mailing zip code." value="">
    </div>
      </div>

          <div class="">
  <input type="checkbox" name="billingtoo_<cfoutput>#Add#</cfoutput>" id="chbSame" />
  <em>Check this box if Physical Address and Mailing Address are the same.</em>
</div>
 
        

          <div id="locationField2">
            <div class="clearfix">
    <label for="pstreet_<cfoutput>#Add#</cfoutput>">Physical Address 1:</label>
    <input type="text" name="pstreet_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="autocomplete2" size="53" maxlength="120" message="Please enter owner #Peoplecount#'s physical address." onFocus="geolocate2()" value="">
    </div> 

    <div class="clearfix">
    <label for="p2street_<cfoutput>#Add#</cfoutput>">Physical Address 2:</label>
    <input type="text" name="p2street_#Add#" validateat="onSubmit" required="no" validate="maxlength" id="route2" size="53" maxlength="120" value="">
    </div>
            
    <div class="clearfix">
    <label for="pcity_<cfoutput>#Add#</cfoutput>">City:</label>
    <input type="text" name="pcity_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="locality2" size="30" maxlength="50" message="Please enter owner #Peoplecount#'s physical city." value="">
      </div>
            
            <div class="clearfix">
    <label for="pstate_<cfoutput>#Add#</cfoutput>">State:</label>
    <input type="text" name="pstate_#Add#" required="yes" id="administrative_area_level_12" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s physical state." value="">
    </div>
                
            <div class="clearfix">
    <label for="pstreet_<cfoutput>#Add#</cfoutput>">Zip Code:</label>
    <input type="text" name="ppostal_#Add#" required="yes" id="postal_code2" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s physical zip code." value="">
    </div>
            </div>

MODIFIED: updated based on feedback below

ALSO CHANGED: Following additional suggestions below

LATEST UPDATE: Adjustments made as per recent comments :)

CURRENT REVISION: Implemented further improvements after more input :)

Answer 2

Give this a try,

It's working perfectly for me.

var placeSearch, autocomplete, autocomplete2;
var componentForm = {
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  postal_code: 'short_name'
};
var componentForm2 = {
  route2: 'long_name',
  locality2: 'long_name',
  administrative_area_level_12: 'short_name',
  postal_code2: 'short_name'
};

function initialize() {
  // Creating the autocomplete object with restrictions to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });
  autocomplete2 = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */
    (document.getElementById('autocomplete2')), {
      types: ['geocode']
    });
  // When an address is selected from the dropdown, populate the form fields.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
  google.maps.event.addListener(autocomplete2, 'place_changed', function() {
    fillInAddress2();
  });
}

// [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 < 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;
    }
  }
  document.getElementById('autocomplete').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];

  document.getElementById('route').value = '';
}

function fillInAddress2() {
    // Get the place details from the autocomplete object.
    var place = autocomplete2.getPlace();

    for (var component in componentForm2) {

      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 < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm2[addressType + '2']) {
        var val = place.address_components[i][componentForm2[addressType + '2']];
        document.getElementById(addressType + '2').value = val;
      }
    }
  document.getElementById('autocomplete2').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];

  document.getElementById('route2').value = '';
}
initialize();

document.querySelector('#chbSame').addEventListener('change', checkedAddr);


function checkedAddr() {
  if (document.getElementById('chbSame').checked) {
    document.getElementById('route2').value = document.getElementById('route').value;
    document.getElementById('locality2').value = document.getElementById('locality').value;
    document.getElementById('administrative_area_level_12').value = document.getElementById('administrative_area_level_1').value;
    document.getElementById('postal_code2').value = document.getElementById('postal_code').value;

document.getElementById('autocomplete2').value = document.getElementById('autocomplete').value;
  } else {
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <body onload="initialize()">
    <div id="locationField">
      <div class="clearfix">
    <label for="street_<cfoutput>#Add#</cfoutput>">Mailing Address 1:</label>
    <input type="text" name="street_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="autocomplete" size="54" maxlength="120" message="Please enter owner #Peoplecount#'s mailing address." onFocus="geolocate()" value="">
    </div>

    <div class="clearfix">
    <label for="m2street_<cfoutput>#Add#</cfoutput>">Mailing Address 2:</label>
    <input type="text" name="m2street_#Add#" validateat="onSubmit" required="no" validate="maxlength" id="route" size="54" maxlength="120" value="">
    </div>
      
    <div class="clearfix">
    <label for="city_<cfoutput>#Add#</cfoutput>">City:</label>
    <input type="text" name="city_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="locality" size="30" maxlength="50" message="Please enter owner #Peoplecount#'s mailing city." value="">
        </div>
        
        <div class="clearfix">
    <label for="state_<cfoutput>#Add#</cfoutput>">State:</label>
    <input type="text" name="state_#Add#" required="yes" id="administrative_area_level_1" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s mailing state." value="">
    </div>
            
            <div class="clearfix">
    <label for="street_<cfoutput>#Add#</cfoutput>">Zip Code:</label>
    <input type="text" name="postal_#Add#" required="yes" id="postal_code" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s mailing zip code." value="">
    </div>
      </div>

          <div class="">
  <input type="checkbox" name="billingtoo_<cfoutput>#Add#</cfoutput>" id="chbSame" />
  <em>Check this box if Physical Address and Mailing Address are the same.</em>
</div>
 
        

          <div id="locationField2">
            <div class="clearfix">
    <label for="pstreet_<cfoutput>#Add#</cfoutput>">Physical Address 1:</label>
    <input type="text" name="pstreet_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="autocomplete2" size="53" maxlength="120" message="Please enter owner #Peoplecount#'s physical address." onFocus="geolocate2()" value="">
    </div> 

    <div class="clearfix">
    <label for="p2street_<cfoutput>#Add#</cfoutput>">Physical Address 2:</label>
    <input type="text" name="p2street_#Add#" validateat="onSubmit" required="no" validate="maxlength" id="route2" size="53" maxlength="120" value="">
    </div>
            
    <div class="clearfix">
    <label for="pcity_<cfoutput>#Add#</cfoutput>">City:</label>
    <input type="text" name="pcity_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="locality2" size="30" maxlength="50" message="Please enter owner #Peoplecount#'s physical city." value="">
      </div>
            
            <div class="clearfix">
    <label for="pstate_<cfoutput>#Add#</cfoutput>">State:</label>
    <input type="text" name="pstate_#Add#" required="yes" id="administrative_area_level_12" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s physical state." value="">
    </div>
                
            <div class="clearfix">
    <label for="pstreet_<cfoutput>#Add#</cfoutput>">Zip Code:</label>
    <input type="text" name="ppostal_#Add#" required="yes" id="postal_code2" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s physical zip code." value="">
    </div>
            </div>

MODIFIED: updated based on feedback below

ALSO CHANGED: Following additional suggestions below

LATEST UPDATE: Adjustments made as per recent comments :)

CURRENT REVISION: Implemented further improvements after more input :)

Answer 3

Answer №2

Initializing address autocomplete function for mailing and physical addresses using Google Maps API.

Answer 4

Initializing address autocomplete function for mailing and physical addresses using Google Maps API.

The Power of Geolocation in Simplifying Address Entry Form Autocompletion

Answer №1

Answer №2

Similar questions

Creating a Full Height Background Image with a Responsive Width Using Jquery

How do I utilize ng-repeat in Angular to pass a variable that specifies the number of repetitions?

Language setting required for dijit.form.DateTextBox

What could be causing the repetitive output in an Angular click event loop?

Steps for changing the background of a div using an array value

Expanding a table by including a new column using Node.js and Knex

Make sure to utilize the className attribute when styling a Material-UI component

Having difficulty leveraging the full capabilities of the Jquery.load() function

Issue with resizing browser window when using three.js EffectComposer

How do I utilize ng-if in Angular to apply to only the parent tag and not the following markup?

Filtering Key Presses in Quasar: A Comprehensive Guide

Retrieve data from a Rails controller using Ajax

Bringing in a feature within the Vue 3 setup

Google Chrome prevents requests from unauthorized sources

Trouble with Ajax requests firing on document load in Firefox

Issue with MUI-table: The alternate rows in the MUI table component are not displaying different colors as intended

Vue js: Stop Sorting array items; only display the resulting array

Right-click context menu not working properly with Internet Explorer

Encountering a console error even after implementing proper handling (MERN + Redux)

Unable to pass the new value to the onclick function