jQuery WP Go Maps - Use search, radius and/or categories in URL parameters to preselect map filters. Also add selected search, radius and categories to URL as user interacts with map so URL can be copied and sent to others

gistfile1.txt

jQuery(function ($) {
    $(document).ready(function () {
        const baseUrl = window.location.href.split('?')[0];

        //Set any search, radius and/or categories from URL params on map load
        if (typeof WPGMZA != 'undefined' && WPGMZA != null) {
            let url = new URL(window.location.href);
            let search = url.searchParams.get("search");
            let radius = url.searchParams.get("radius");
            let categories = url.searchParams.get("categories");

            $(WPGMZA.maps[0].storeLocator.addressInput.element).val(search);
            $(WPGMZA.maps[0].storeLocator.radiusElement).val(radius);

            if (categories) {
                categories = categories.split(',');
                if (categories.length > 0) {
                    let categoryFilter = $('.wpgmza-marker-listing-category-filter');
                    for (let category of categories) {
                        categoryFilter.find(`input.wpgmza_checkbox[value="${category}"]`).prop('checked', true);
                        categoryFilter.find(`input.wpgmza_checkbox[value="${category}"]`).trigger('change');
                    }
                }
            }

            if (search || radius || categories) {
                //only need to do if there are search params
                $(document).on('markersplaced.wpgmza', function () {
                    if (search) {
                        WPGMZA.maps[0].storeLocator.onSearch();
                    } else if (categories) {
                        console.log('only categories in URL');
                        //if only categories, then just trigger change
                        let categoryFilter = $('.wpgmza-marker-listing-category-filter');
                        for (let category of categories) {
                            categoryFilter.find(`input.wpgmza_checkbox[value="${category}"]`).trigger('change');
                        }
                    }
                });
            }
        }

        //add search params to URL when search button clicked
        $('.wpgmza-search').on('click', function () {
            let search = $(WPGMZA.maps[0].storeLocator.addressInput.element).val();
            let radius = $(WPGMZA.maps[0].storeLocator.radiusElement).val();
            let categories = [];

            //get all checked categories
            $('input.wpgmza_checkbox').each(function () {
                if ($(this).prop('checked')) {
                    categories.push($(this).val());
                }
            });


            const params = new URLSearchParams({
                search: search,
                radius: radius,
                categories: categories.join(','),
            });
            const urlParams = params.toString();

            window.history.pushState({}, "", baseUrl + '?' + urlParams);
        });

        //add categories to URL when checked/unchecked
        $('input.wpgmza_checkbox').each(function () {
            $(this).change(function () {
                const urlparams = new URLSearchParams(window.location.search);
                if ($(this).is(':checked')) {
                    if (urlparams.has('categories')) {
                        let categories = urlparams.get('categories');
                        categories = categories.split(',');
                        categories.push($(this).val());
                        urlparams.set('categories', categories.join(','));
                    } else {
                        urlparams.set('categories', $(this).val());
                    }
                    window.history.pushState({}, "", baseUrl + '?' + urlparams.toString());
                } else {
                    if (urlparams.has('categories')) {
                        let categories = urlparams.get('categories');
                        categories = categories.split(',');
                        categories = categories.filter((word) => word != $(this).val());
                        if (categories.length == 0) {
                            urlparams.delete('categories');
                        }else{
                            urlparams.set('categories', categories.join(','));
                        }
                        window.history.pushState({}, "", baseUrl + '?' + urlparams.toString());
                    } //no else because no categories in url to remove
                }

            });
        });

    });

});