[Resolved] maps autocomplete restrict to 1 country, cities and postcode

[Author]

Posts

[herbie4]

Tell us what you are trying to do?

I want to limt the auto suggest from de distance center field to just Netherlands.
And suggestions should only look at postcode or city name.

Your colleague Minesh implemented this, but it seems not to be working correct.
When I type 'zoe' I can see suggestions from other countries then NL.

Is there any documentation that you are following?
Here is the current code from loop editor JS tab:

function initialize() {
var input = document.getElementsByClassName('js-toolset-maps-distance-center');
options = {
language: 'nl-NL',
types: [],
componentRestrictions: { country: 'nl' }
};

var autocomplete = new google.maps.places.Autocomplete(input[0],options);
}

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

Hope you can help.

[Luo Yang]

Hello,

I assume we are talking about the distance filter in custom search form, if it is, please try the custom JS workaround in below Knowledge Base link:
hidden link

[herbie4]

Hi Luo,
I added this in the loop editor js tab instead of the other script but it still does not work. Any ideas?

( function( $ ) {
	$( document ).bind( 'js_event_wpv_addon_maps_init_map_completed', function(){

        var input = document.getElementById('toolset-maps-distance-center');
        var options = {
        types: ['(cities)'],
        componentRestrictions: {country: 'nl'}
        };

        autocomplete = new google.maps.places.Autocomplete(input, options);

	});
})( jQuery );

[Luo Yang]

Did you get any JS errors?
Since it is a custom codes problem, please provide a test site with the same problem, fill below private message box with login details, also point out the problem page URL and view URL, I need to test and debug it in a live website, thanks

[Luo Yang]

Since those JS codes need to take effect on search form, I have moved the custom JS codes into section "Search and Pagination", input box "JS editor", and modified them as below:

( function( $ ) {
	$( document ).on( 'click', '#toolset-maps-distance-center', function( event ) {

      	event.preventDefault();
        var input = document.getElementById('toolset-maps-distance-center');
        var options = {
        //types: ['(cities)'],
        componentRestrictions: {country: 'NL'}
        };

        autocomplete = new google.maps.places.Autocomplete(input, options);

	});
})( jQuery );

Test it in frontend, it works fine, see my screenshot nl.JPG

Please test again, check if it is what you want.

[herbie4]

Hi Luo,

Thank you for the code. That worked. Only I wanted to show just pc and city auto suggestions, so I changed your code a little to:

types: ['(regions)'],
        componentRestrictions: {'country': "NL"}

Now it is working great.
Thank you!

[herbie4]

My issue is resolved now. Thank you!