[Resolved] Limiting addresses in Forms via JS disables display of map when filling out form

[Author]

Posts

[simonM-5]

Hi Support

I refer to my previous ticket, worked on by Christian: https://toolset.com/forums/topic/limit-google-map-address-locations-to-germany-via-toolset-forms/

Solution provided: Add this code to the JS panel:
jQuery(document).ready(function(){
jQuery(".js-toolset-maps-address-autocomplete").geocomplete({country: 'DE',type: []});
});

While the solution provided does indeed limit the addresses which can be input into the address field to those in Germany (which is great!), the addition of the code to the form's JS panel prevents the map from displaying the location selected while the user is filling out the form. Instead the user just sees what looks like a "blocked" plugin (see screenshot).

The issue can be seen here: hidden link

I tested removing the code and the map is shown fine, then added the code again and the addresses found are restricted but the map is no longer showing the selected location.

Is there any way to restore the displaying of the map and keep restricting the addresses?

Thanks and kind regards
Simon

[Christian Cox]

I've investigated this and it seems that there is a small problem with the code I provided. The Forms initialization process must be run before the code is triggered. Unfortunately there is no reliable event triggered when the initialization process is complete, so the most effective workaround is to add a small timed delay to trigger the country restriction code after that initialization is assumed to have run completely. The delay can be added by replacing the previous code snippet with the following snippet:

var delayed = function() {
  jQuery(".js-toolset-maps-address-autocomplete").each(function(index, item) {
    var auto = new google.maps.places.Autocomplete(item);
    auto.setComponentRestrictions({'country':'de'});
  });
};

jQuery(document).ready(function(){
  setTimeout( delayed, 2000 );  
});

The setTimeout code adds a delay of 2000 milliseconds (ms) before setting the country restriction. I recommend you test with the 2000 ms delay as shown above, but you may need to adjust that to a higher number on your own site for best results. I would not recommend setting the delay much lower than 2000 ms, to ensure maximum compatibility. Since there is a delay before the restriction is applied, if the autosuggest address field is near the beginning of the Form, your Users may momentarily experience the ability to select addresses that are not restricted. You may want to move the address input field lower in the Form to limit this delayed experience, but in most cases 2000 milliseconds is the minimum delay required.

[simonM-5]

HI Christian

The map input field is already at the bottom of our form. When I tested I was always able to add non-German addresses. So the map is appearing again, but the addresses aren't being limited to German ones, even after 2000 ms (equal to 2 seconds)...

Feel free to adjust the JS code if you need to on our site, it's still a dev site. You can then test your new code using the link hidden link

Kind regards
Simon

[Christian Cox]

Okay can you provide a login? I don't have a current one.

[Christian Cox]

I've added this update and I can see now the addresses are both restricted and mapped. Can you confirm?

var delayed = function() {
  jQuery(".js-toolset-maps-address-autocomplete").each(function(index,item){
    var map = jQuery(item).closest('.js-toolset-google-map-container').find('.js-toolset-google-map-preview:eq(0)');
    jQuery(item).geocomplete({'country':'DE', 'type': [], 'map': map});
  });
};
 
jQuery(document).ready(function(){
  setTimeout( delayed, 2000 );  
});

[simonM-5]

My issue is resolved now. Thank you!