I want to display a map of the search. But I keep getting "undefined variable: req" notification. What should I change from my following code:

var jQuery_1_8_2 = jQuery.noConflict();
    $(function () {
        var array = JSON.parse('{!! !empty($total_search_query) ? json_encode($total_search_query) : "[]" !!}');
        console.log(array);
        $('#map2').vectorMap({
            map: 'indonesia-adm1_merc',
            backgroundColor: '#ADF3F0',
            regionStyle: {
                initial: {
                    fill: '#FFFFFF'
                },
                hover: {
                    fill: '#175083'
                }
            },
            zoomButtons: false,
            zoomOnScroll: false,
            zoomOnClick: false,
            zoomMax: 1,
            normalizeFunction: 'polynomial',
            onRegionClick: function (event, code) {
                var url = '{{ route("search", ["q" => $req->input("q"), "province" => ":id"]) }}';
                url = url.replace("%3Aid", code.toLowerCase());
                window.location.href = url;
            },
            onRegionTipShow: function (event, label, code) {
                var map = $('#map2').vectorMap('get', 'mapObject');
                var regionName = map.getRegionName(code);
                var a = array.find(a => a.name === myTrim(regionName))['count'];
                
                label.html('<div class="map-tooltip"><h4 class="header">' + regionName + '</h4><p class="description">Total: ' + a + '</p></div>');
            }
        });
    }(jQuery_1_8_2));