使用地理位置自动填写表格填写表格

Question

我正在尝试使用Geolocation自动填写用户的地址字段。我正在努力的地方（邮寄地址1 :)＆amp; （物理地址1 :)截至目前，它将在用户开始输入时显示用户地址，但是当他们选择并选择他们的地址时，我不希望整个地址加上Mailing Address 1:上的城市状态和邮政编码。我希望它显示街道号码和街道地址，然后填写其他字段（城市，州，邮政编码），留下Mailing Address 2:空白，以防他们有公寓或套房。

然后，如果您选择物理邮寄地址和邮寄地址相同，我希望它完全像上面那样填写。

如果地址不一样，我希望它遵循上述相同的过程。

非常感谢任何帮助！

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>

Answer 1

试试这个，

对我来说很好。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：根据以下评论更新

编辑2：根据以下评论

编辑3：根据下面的另一条评论：）

编辑4：根据下面的另一条评论：）

编辑5： - || -

Answer 2

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>