CODEWITHSUNDEEP
javascriptgeolocation
user4409098
user4409098

Reputation:

Automatic Address Fill In Form Using Geolocation

I am trying to use Geolocation to automatically fill in the address fields for my users. Where I am struggling is on (Mailing Address 1:) & (Physical Address 1:) As of now it will show the user addresses once they start typing but when they select and make their choice for their address I do not want the entire address plus city state and zipcode on Mailing Address 1:. I want it show Street Number and Street Address then fill in the other fields (city, state, zip) leaving Mailing Address 2: blank in case they have an apartment or suite.

Then if you select that the physical and mailing addresses are the same obviously I would like it to fill in exactly like above.

If the addresses are not the same I would like it to follow the same process as above.

Any help would be greatly appreciated!

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() {
  // Create the autocomplete object, restricting the search
  // 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 the user selects an address from the dropdown,
  // populate the address fields in the form.
  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;
    }
  }
}

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;
      }
    }
  }
  // [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);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

function geolocate2() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete2.setBounds(circle.getBounds());
      });
    }
  }
  // [END region_geolocation]
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;
    

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

Upvotes: 2

Views: 2836

Answers (2)

mohan singh
mohan singh

Reputation: 1

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() {
  // Create the autocomplete object, restricting the search
  // 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 the user selects an address from the dropdown,
  // populate the address fields in the form.
  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;
    }
  }
  //var keys=[];for (var key in place.address_components[0]) keys.push(key);
  //alert(keys):
  document.getElementById('autocomplete').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];
  
  /*document.getElementById('route').value = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete').value : '');*/
  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 = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete2').value : '');*/
  document.getElementById('route2').value = '';
}
  // [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);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

function geolocate2() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete2.setBounds(circle.getBounds());
      });
    }
  }
  // [END region_geolocation]
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>

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() {
  // Create the autocomplete object, restricting the search
  // 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 the user selects an address from the dropdown,
  // populate the address fields in the form.
  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;
    }
  }
  //var keys=[];for (var key in place.address_components[0]) keys.push(key);
  //alert(keys):
  document.getElementById('autocomplete').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];
  
  /*document.getElementById('route').value = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete').value : '');*/
  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 = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete2').value : '');*/
  document.getElementById('route2').value = '';
}
  // [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);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

function geolocate2() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete2.setBounds(circle.getBounds());
      });
    }
  }
  // [END region_geolocation]
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>

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() {
  // Create the autocomplete object, restricting the search
  // 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 the user selects an address from the dropdown,
  // populate the address fields in the form.
  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;
    }
  }
  //var keys=[];for (var key in place.address_components[0]) keys.push(key);
  //alert(keys):
  document.getElementById('autocomplete').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];
  
  /*document.getElementById('route').value = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete').value : '');*/
  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 = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete2').value : '');*/
  document.getElementById('route2').value = '';
}
  // [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);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

function geolocate2() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete2.setBounds(circle.getBounds());
      });
    }
  }
  // [END region_geolocation]
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>

Upvotes: 0

Ivan Sivak
Ivan Sivak

Reputation: 7498

Try this,

works fine 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() {
  // Create the autocomplete object, restricting the search
  // 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 the user selects an address from the dropdown,
  // populate the address fields in the form.
  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;
    }
  }
  //var keys=[];for (var key in place.address_components[0]) keys.push(key);
  //alert(keys):
  document.getElementById('autocomplete').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];
  
  /*document.getElementById('route').value = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete').value : '');*/
  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 = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete2').value : '');*/
  document.getElementById('route2').value = '';
}
  // [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);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

function geolocate2() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete2.setBounds(circle.getBounds());
      });
    }
  }
  // [END region_geolocation]
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>

EDIT: updated as per comments below

EDIT 2: As per comments below

EDIT 3: As per another comments below :)

EDIT 4: As per yet another comments below :)

EDIT 5: -||-

Upvotes: 3

Related Questions