0

I am trying to implement multiple google address validation in a form (on arround 5 places). I am using basic script provided by google it-self with minor changes. But unfortunately got stuck in an error in console.

I am calling a function onFocus and passing parameter in that, then passing those parameters to append search results as:

Address field:

<input autocomplete="off-false" class="v-validate" type="text" id="institution-street-address" name="street-address-institution" data-validate="{required:true}" onfocus="geolocate('institution-street-address','institution-city')" />

Script:

    <script>
         var placeSearch, autocomplete;
         var componentForm = {
         //street_number: 'short_name',
         //route: 'long_name',
         locality: 'long_name',
         //administrative_area_level_1: 'short_name',
         //country: 'long_name',
         //postal_code: 'short_name'
         };

           function geolocate(idMainTab,cityId) {
            console.log('hi5');
            autocomplete = new google.maps.places.Autocomplete(
            document.getElementById(idMainTab), {types: ['geocode']});
            //autocomplete.setFields('address_components');
            autocomplete.addListener('place_changed', fillInAddress(cityId));

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

function fillInAddress(cityId) {
    var institutionForm = {
        locality: cityId,
    };
    console.log(institutionForm);
  // 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 then fill-in 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(institutionForm[addressType]).value = val;
    }
  }
}
       </script>

I checked in console.log(institutionForm); I am getting the value of cityId passed.

I am constanly getting this error in console:

"Uncaught TypeError: Cannot read property 'address_components' of undefined".

Unable to figure out what doing wrong.

[Edit]:

I think there is something else then the duplicate reference was been provided, I added a try catch to handle undefined request but still Google address validation doesn't work:

What I did:

I changed fillInAddress(cityId) as:

function fillInAddress(cityId) {
  // 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 then fill-in the corresponding field on the form.
   try {
        for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        console.log(addressType);
        if (componentForm[addressType]) {
          var val = place.address_components[i][componentForm[addressType]];
          console.log(val);
          document.getElementById(institutionForm[addressType]).value = val;
        }
      }
    } catch (e) {
        console.log('in catch');
        return e;
    }


}

Now I am getting the previous error. On focus I am going in catch, but on appending address siggestions to city getting this error in console:

Uncaught TypeError: this.j.apply is not a function

Also I found some posts other as well pointing toward such errors: Passing google event data in addListener

But no luck unable to identify what the exact reason is.

0 Answers0