Why setting autocompleteSearchBox componentRestrictions country object google map does not change its locations?

In my Laravel 8 / Alpinejs 2.8 app I use google map and when I open form with existing data I show selected country with setting autocompleteSearchBox componentRestrictions.country and it works OK. But if user selects other country I try to change country in map and failed. My code:

function adminAdLocationEditorComponentSetup() {
    console.log('adminAdLocationEditorComponentSetup::')

    return {

        autocompleteSearchBox: null, // google map instances
        geocoder: null,
        map: null,
        ...
    },


    initialize: function (isInsert, adLocationLat, adLocationLng) {
        let form_ad_location_edit = document.querySelector("#form_ad_location_edit")
        adLocationLng = parseFloat(adLocationLng)
        adLocationLat = parseFloat(adLocationLat)
        console.log('adLocationLng::')
        console.log(adLocationLng)

        if (isEmpty(adLocationLat) || isEmpty(adLocationLng)) {
            console.log('INSIDE!!::')
            adLocationLat = 51.5000
            adLocationLng = -0.1100
        }
        console.log('adLocationLat::')
        console.log(adLocationLat)
        form_ad_location_edit.addEventListener("keyup keypress", function (e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode === 13) {
                e.preventDefault();
                return false;
            }
        });


        this.geocoder = new google.maps.Geocoder;

        const fieldKey = 'ad_location';
        this.map = new google.maps.Map(document.getElementById(fieldKey + '-map'), {
            center: {lat: adLocationLat, lng: adLocationLng}, // create map with default values
            zoom: 13
        });
        let self = this
        this.map.addListener('click', function (event) {
            self.setAdLocationCoordinatesPoint(event.latLng.lat(), event.latLng.lng(), true)
        });

        const marker = new google.maps.Marker({
            map: this.map,
            position: {lat: adLocationLat, lng: adLocationLng},
        });

        let country = document.querySelector("#country").value
        if (country) {
            options.componentRestrictions.country = country
        }
        this.autocompleteSearchBox = new google.maps.places.Autocomplete(input, options);
        this.autocompleteSearchBox.key = fieldKey
        google.maps.event.addListener(self.autocompleteSearchBox, 'place_changed', function () {
            marker.setVisible(false);
        ...
        });
        // }
    }

    setAdLocationCoordinatesPoint: function (lat, lng, showPopupAlert) {
        document.querySelector("#lat").value = lat
        document.querySelector("#lng").value = lng
    }


    countrySelected: function (option) { // ewhen country is selected
        document.querySelector("#country").value = option.value
        document.querySelector("#country_label").value = option.label
        this.autocompleteSearchBox.componentRestrictions.country = option.value // I set new country
        console.log('this.autocompleteSearchBox::')
        console.log(this.autocompleteSearchBox)
    }
, 
}
} // function adminAdLocationEditorComponentSetup() {

In the console I see valid autocompleteSearchBox.componentRestrictions object with new country set, but google map has not changed it country : https://prnt.sc/113pkxm I did not find any update/apply method for google map and as this.autocompleteSearchBox is global object I expected it will work correctly.

What is wrong?

Answer

There is no documented Autocomplete componentRestrictions property.

Where you use it initially is in the AutocompleteOptions anonymous object that is used in the Autocomplete constructor.

Use the documented setComponentRestrictions function on the Autocomplete class.

Change:

    countrySelected: function (option) { // ewhen country is selected
        document.querySelector("#country").value = option.value
        document.querySelector("#country_label").value = option.label
        this.autocompleteSearchBox.componentRestrictions.country = option.value // I set new country
        console.log('this.autocompleteSearchBox::')
        console.log(this.autocompleteSearchBox)
    }

To:

    countrySelected: function (option) { // ewhen country is selected
        document.querySelector("#country").value = option.value
        document.querySelector("#country_label").value = option.label
        this.autocompleteSearchBox.setComponentRestrictions({country:option.value}); // set new country
        console.log('this.autocompleteSearchBox::')
        console.log(this.autocompleteSearchBox)
    }

proof of concept fiddle screenshot with US selected screenshot with BE selected screenshot with FR selected