[Resolved] geolocate address lookup issue

[Author]

Posts

[Stefan van Perlo]

Tell us what you are trying to do?
I'm trying to limit the address lookup to two countries
Is there any documentation that you are following?
https://toolset.com/forums/topic/limit-google-map-address-locations-to-germany-via-toolset-forms/
What is the link to your site?
hidden link (it's a non public link)

I'm trying to limit the address lookup within toolset maps with this code applied in the js field of a form:
jQuery(".wpv-geolocation").geocomplete({country: ["NL", "BE"],type: []});
wich works in the adress lookup; but the map doesnt show. When i remove the above code the map works as expected

Any help is greatly appreciated!

[Jamal]

Hello and thank you for contacting the Toolset support.

Can you try with the following code:

jQuery(document).ready(function(){
  jQuery(".js-toolset-maps-address-autocomplete").geocomplete({country: ["NL", "BE"], type: []});
});

If that does not help, please allow me temporary access to your website to check this further. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

Let me know where we can see this map in the frontend.

[Jamal]

Thank you for the credentials, I was able to login, but I could not get the form. Probably because I don't have the Organizer role.

So, I created a private page and put the form inside of it during my testing. hidden link

For some reason, I could not find, the geocomplete field is already restricted to lookup for places in Netherlands. I could not find where this is set up. Can you help understand it?

The code that I have suggested earlier did not work. I dig into the plugin's source code and I was able to come up with this solution:

jQuery(".js-toolset-maps-address-autocomplete").geocomplete().each(function(){
      var map = jQuery(this).data("plugin_geocomplete")
      map.autocomplete.setComponentRestrictions({country: ["NL", "BE"]})
    })

But I could not make it work until I delayed it with 5 seconds. I suspect that there is another code that resets the country restriction to only Netherlands. The final code is:

jQuery(document).ready(function(){
  setTimeout(function() {
    jQuery(".js-toolset-maps-address-autocomplete").geocomplete().each(function(){
      var map = jQuery(this).data("plugin_geocomplete")
      map.autocomplete.setComponentRestrictions({country: ["NL", "BE"]})
    })
  }, 5 * 1000);
});

I have also commented a line that was triggering an error because the initialize function does not exist:

jQuery(document).ready(function($){
  // google.maps.event.addDomListener(window, 'load', initialize);
});

I hope this is a viable solution. Otherwise, I'll need to check again without any other plugins and in a default theme to isolate the issue and understand what sets the restriction to Netherlands.

[Stefan van Perlo]

Thank you for your help.

--For some reason, I could not find, the geocomplete field is already restricted to lookup for places in Netherlands. I could not find where this is set up. Can you help understand it?

It turned out i changed this in jquery.geocomplete.min.js in the maps plugin (an earlier test i didnt correct) i restored the original files in the plugin now. For some reason, i cant remove the time delay (this is a problem because the 5 seconsds is quite long and the customor first tests the address) can you find out why it needs such a long delay?

[Jamal]

Maybe my browser still caches the old version of the script, but the geocomplete is still restricted to Netherlands. Check this screenshot hidden link
These are the options that were used to initialize it the geocomplete control.

I changed the interval to 3s as a workaround, and it seems to work, until we find out what is restricting the country to Netherlands.
Please switch to a default theme and check again. Let me know what you will get.

[Stefan van Perlo]

I've set the default theme and tested the form again. It doesnt seem to work at three seconds either now.
Before your last test i deleted and re-installed the maps plugin, to make sure it didn't have any old edits. I have no idea where the NL flag comes from.

[Jamal]

Can I take a copy of your website to debug in my local development environment?

[Stefan van Perlo]

Yes sure!

I've made a backup for you (sql is in public folder) at hidden link

Thank you,

[Jamal]

Thank you for the copy. Indeed you have hardcoded the country in this file wp-content/plugins/toolset-maps/resources/js/jquery.geocomplete.min.js

However, even after using an unmodified version, the issue persists, and the lookup is done for all countries. Unless we use a 5 seconds timeout.

Instead of using a timeout we can listen for the focus event on the geocomplete field and put the restriction then. I run a test, but I could not make it work without a slight timeout (100 ms). The final code seems to work as expected on the staging site:

jQuery(document).ready(function(){
  jQuery(".js-toolset-maps-address-autocomplete").on('focus', function() {
    var thiz = this;
    setTimeout(function(){
      var map = jQuery(thiz).geocomplete().data("plugin_geocomplete")
      map.autocomplete.setComponentRestrictions({country: ["NL", "BE"]})
    }, 100)
  })
});

Can you try from your side and confirm if this produce the expected results?

[Stefan van Perlo]

this seems fixed now, the solution works. My issue is resolved now. Thank you!