Customizing One Google Map by Categories/Filters Across Pages

Ask the Community Customization
1
  • **Issue description:
    **
    I’d like to know if there’s a way to set up a single Google Map in Elfsight with multiple categories (e.g., food, drink, parking, etc.) and then reuse that same map across different pages, but display only certain categories on each page using filters. Is this possible without having to create separate maps for each category?
2 Likes
3

Hey there and welcome to the Elfsight family :waving_hand:

Glad to say that this customization is feasible! Could you please send me a link to your website and specify which categories should be used on each page?

1 Like
4

Hello @Max and thank you so much for your response! For now I just need the ability to have the main maps page show all the filters (as it does now), and then another page that will pull from the same map that shows just the ‘Parking’ filters.
Here is the link:

On that note, I will also need to do the same thing for the ‘Events’ calendar. Have an ‘Events’ page that show all of the events, but then show different events using filters on other pages. Is that possible?

Thank you!!!

Celina

2 Likes
5

Hi there, @Celina_Ramirez :waving_hand:

Thank you so much! Could you please also send me a link to the main map page, where all categories should be displayed?

As for the Event Calendar, this functionality is also possible there. This guide explains how you can achieve this - Event Calendar: How to make certain filter selected by default.

Check it out and let me know if it helped :wink:

1 Like
6

Hello @Max
The page below is the page that would show all the categories (main map page):

This page is where I only want to show the ‘Parking’ categories:

Thank you!
Celina

1 Like
7

Awesome, thank you!

Your request is with our devs now. I’ll update you once the solution is ready :slightly_smiling_face:

8

Thank you!!!

1 Like
9

Hi there, @Celina_Ramirez :waving_hand:

We’ve added this script to the Custom JS field on the Appearance tab of your widget’s settings:

const waitForElement = (selector, root = document) =>
	new Promise((res) => {
		let i = 0;

		const check = () => {
			const component = root.querySelector(selector);

			if (component) {
				res(component);
			} else if (i !== 50) {
				setTimeout(check, 100);
				i++;
			}
		};

		check();
	});
	
if (window.location.pathname === '/parking') {
	waitForElement('.eapps-google-maps-bar-filters-item:nth-child(3)').then(
		(filter) => {
			filter.click();

			const done = document.querySelector(
				".eapps-google-maps-bar-actions [eapps-link='done']"
			);
			done?.click();
		}
	);
}

Please check your website and let me know how it works :slightly_smiling_face:

1 Like
10

Hello @Max
Oh my goodness, thank you so much!!! This looks great! :smiley: :partying_face: :star_struck:

2 Likes
11

Happy to know the code worked perfectly for you!

We’re always here to help in case of any further questions :wink:

12

Hello @Max
I hope you’re doing well! I looked through the link you provided, and wanted to know if there is a way to implemented the same event calendar on two pages but with different tags. Example: We need to have one event calendar but want to have like three highlighted events that only show on the homepage, and then users can click to see the entire event calendar on the main event page. I am assuming we would need to use tags and tag as ‘homepage event’ or something like that. Can this be accomplished? Thank you!

1 Like
13

Hi @Celina_Ramirez :waving_hand:

The functionality described in this guide works only with filters, and see the tag filter isn’t supported in our app now, there is no way to achieve this now.

The good news is that we’re currently working on the custom filters feature. Once it’s released, you’ll be able to add a tag filter and pre-select it on different pages.

So, please upvote this idea to stay in the loop :slightly_smiling_face:

1 Like