Google Maps API Autocomplete 2Nd Address Fields on Same Page

Google Maps API autocomplete 2nd address fields on same page

You need to hande the two autocomplete inputs. Here is a generalized version of fillInAddress that will handle multiple autocomplete objects with fields with a unique extension (the "2" in your second version of the form):

function fillInAddress(autocomplete, unique) {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        if(!!document.getElementById(component + unique)){
            document.getElementById(component + unique).value = '';
            document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType + unique).value = val;
        }
    }
}

Call it like this:

// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */
(document.getElementById('autocomplete')), {
    types: ['geocode']
});

// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', function () {
    fillInAddress(autocomplete, "");
});

// Create the second autocomplete object, restricting the search to geographical
// location types.
autocomplete2 = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */
(document.getElementById('autocomplete2')), {
    types: ['geocode']
});
autocomplete2.addListener('place_changed', function () {
    fillInAddress(autocomplete2, "2");
});

working code snippet:

// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

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

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', function() {
    fillInAddress(autocomplete, "");
  });

  autocomplete2 = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('autocomplete2')), {
      types: ['geocode']
    });
  autocomplete2.addListener('place_changed', function() {
    fillInAddress(autocomplete2, "2");
  });

}

function fillInAddress(autocomplete, unique) {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    if (!!document.getElementById(component + unique)) {
      document.getElementById(component + unique).value = '';
      document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType + unique).value = val;
    }
  }
}
google.maps.event.addDomListener(window, "load", initAutocomplete);

function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="locationField">
  <input id="autocomplete" placeholder="Start typing your address" onFocus="geolocate()" type="text" />
</div>
<div id="addressone">
  <input type="text" id="street_number" name="street_number" />
  <input type="text" id="route" name="street_name" />
  <input type="text" id="locality" name="town_city" />
  <input type="text" id="administrative_area_level_1" name="administrative_area_level_1" />
  <input type="text" id="postal_code" name="postcode" />
  <input type="text" id="country" name="country" />
</div>
<div id="locationField2">
  <input id="autocomplete2" placeholder="Start typing your address" onFocus="geolocate()" type="text" />
</div>
<div id="addresstwo">
  <input type="text" id="street_number2" name="street_number2" />
  <input type="text" id="route2" name="street_name2" />
  <input type="text" id="locality2" name="town_city2" />
  <input type="text" id="administrative_area_level_12" name="administrative_area_level_12" />
  <input type="text" id="postal_code2" name="postcode2" />
  <input type="text" id="country2" name="country2" />
</div>

Adding Multiple Instances of Google Places on Same Page

It is simply problem.

You using two IDs "autocomplete" and "autocomplete2"

but initialized only ID "autocomplete".

Try add this code to initialize().

Javascript

autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('autocomplete2'), { types: [ 'geocode' ] });
google.maps.event.addListener(autocomplete2, 'place_changed', function() {
  fillInAddress();
});

Adding an extra component to Multiple Google Autocomplete Place

The issue is that the existing code is only looking at the first type in the array of types. To find the sublocality, it needs to process the whole array:

function fillInAddress(autocomplete, unique) {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    if (!!document.getElementById(component + unique)) {
      document.getElementById(component + unique).value = '';
      document.getElementById(component + unique).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 addressTypes = place.address_components[i].types;
    // process the complete array of types
    for (var j = 0; j < addressTypes.length; j++) {
      var addressType = addressTypes[j];
      if (componentForm[addressType] && document.getElementById(addressType + unique)) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType + unique).value = val;
      }
    }
  }
  document.getElementById('latitude' + unique).value = place.geometry.location.lat();
  document.getElementById('longitude' + unique).value = place.geometry.location.lng();
}

proof of concept fiddle

code snippet:

var placeSearch, autocomplete, autocomplete2;var componentForm = {  sublocality: 'short_name',  street_number: 'short_name',  route: 'long_name',  locality: 'long_name',  administrative_area_level_1: 'short_name',  country: 'long_name',  postal_code: 'short_name',  latitude: 'long_name',  longitude: 'short_name'};
function initAutocomplete() {  // Create the autocomplete object, restricting the search to geographical  // location types.  autocomplete = new google.maps.places.Autocomplete(    /** @type {!HTMLInputElement} */    (document.getElementById('autocomplete')), {      types: ['geocode']    });
  // When the user selects an address from the dropdown, populate the address  // fields in the form.  autocomplete.addListener('place_changed', function() {    fillInAddress(autocomplete, "");  });
  autocomplete2 = new google.maps.places.Autocomplete(    /** @type {!HTMLInputElement} */    (document.getElementById('autocomplete2')), {      types: ['geocode']    });  autocomplete2.addListener('place_changed', function() {    fillInAddress(autocomplete2, "2");  });
}
function fillInAddress(autocomplete, unique) {  // Get the place details from the autocomplete object.  var place = autocomplete.getPlace();
  for (var component in componentForm) {    if (!!document.getElementById(component + unique)) {      document.getElementById(component + unique).value = '';      document.getElementById(component + unique).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 addressTypes = place.address_components[i].types;    for (var j = 0; j < addressTypes.length; j++) {      var addressType = addressTypes[j];      if (componentForm[addressType] && document.getElementById(addressType + unique)) {        var val = place.address_components[i][componentForm[addressType]];        document.getElementById(addressType + unique).value = val;      }    }  }  document.getElementById('latitude' + unique).value = place.geometry.location.lat();  document.getElementById('longitude' + unique).value = place.geometry.location.lng();}
google.maps.event.addDomListener(window, "load", initAutocomplete);
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script><input id="autocomplete" /><input id="autocomplete2" />
<div id="addressone">  <label>number</label>  <input type="text" id="street_number" name="street_number" />  <br>  <label>street</label>  <input type="text" id="route" name="street_name" />  <br>  <label>town</label>  <input type="text" id="locality" name="town_city" />  <br>  <label>sublocality</label>  <input type="text" id="sublocality" name="sublocatlity" />  <br>  <label>adm1</label>  <input type="text" id="administrative_area_level_1" name="administrative_area_level_1" />  <br>  <label>postcode</label>  <input type="text" id="postal_code" name="postcode" />  <br>  <label>country</label>  <input type="text" id="country" name="country" />  <br>  <label>lat</label>  <input type="text" id="latitude" />  <label>lng</label>  <input type="text" id="longitude" />  <br></div><br><div id="addresstwo">  <input type="text" id="street_number2" name="street_number2" />  <input type="text" id="route2" name="street_name2" />  <input type="text" id="locality2" name="town_city2" />  <input type="text" id="sublocality2" name="sublocatlity2" />  <input type="text" id="administrative_area_level_12" name="administrative_area_level_12" />  <input type="text" id="postal_code2" name="postcode2" />  <input type="text" id="country2" name="country2" />  <input type="text" id="latitude2" />  <input type="text" id="longitude2" /></div><div id="map_canvas"></div>

How to change address fields like street number to address1 for place autocomplete address form - Google?

Change street_number to address1 in both HTML and JS like this:

HTML:

<td class="slimField"><input class="field" id="address1"
      disabled="true"></input></td>

JS:

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

Because Google Maps API uses street_number as key, so you need to change the JS code a little bit too:

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(place.address_components[i].types[0] == 'street_number') {
        var addressType = 'address1';
      }

     if (componentForm[addressType]) {
         var val = place.address_components[i][componentForm[addressType]];
         document.getElementById(addressType).value = val;
     }
   }
}

As you can see above, I have added a condition after var addressType = place.address_components[i].types[0]; to check if it's street_number then replace it with address1, so google knows which element to bind street number with.

if(place.address_components[i].types[0] == 'street_number') {
    var addressType = 'address1';
}

Demo: https://jsfiddle.net/o7rx90dg/1/


Related Topics

JavaScript Object Literals Syntax Error

Promises for Promises That Are Yet to Be Created Without Using the Deferred [Anti]Pattern

Onclick Event Binding in React.Js

How to Access Nested JSON Data

Why Does JavaScript Getyear() Return 108

Jquery:Select All Element with Custom Attribute

Why Is Nan === Nan False

JavaScript When to Use Prototypes

Check If an Object Implements an Interface at Runtime with Typescript

Contexts and Methods for Communication Between the Browser Action, Background Scripts, and Content Scripts of Chrome Extensions

Why Are Es6 Classes Not Hoisted

What's the Purpose of Starting Semi Colon at Beginning of JavaScript

Read/Write Bytes of Float in Js

What the Difference Between Loadcomplete and Gridcomplete Events

Why Does Console.Log Say Undefined, and Then the Correct Value

Angularjs Does Not Send Hidden Field Value

How to Access an Access Array Item by Index in Handlebars

How to Send the "&" (Ampersand) Character via Ajax


Leave a reply



Submit