Skip to content

Instantly share code, notes, and snippets.

@bridgetwes
Last active December 29, 2023 17:11
Show Gist options
  • Save bridgetwes/3f1a6d1efdfb10768c04fc100c9c6ff8 to your computer and use it in GitHub Desktop.
Save bridgetwes/3f1a6d1efdfb10768c04fc100c9c6ff8 to your computer and use it in GitHub Desktop.
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
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
}
});
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment