Multifiltering CMS + Google Maps with multiple locations

Design help Custom code
1

Hello everybody! :wave:

I’m working now on a CMS based real estate website: https://new-housingbudapest.webflow.io/ :raised_hands:
It’s going pretty cool, the Google maps with custom markers and Popup windows working fine with the collections, vice versa the search bar is under construction - forget it now. :sweat_smile:

I’m looking for a solution specially on this page: https://new-housingbudapest.webflow.io/ingatlanok :point_up:

  1. First of all a big Thanks to @sabanna and her tutorial: ([TUTORIAL] MixItUp filtering plugin with Dynamic content) now I’m able to multifilter the flats/apartments from the CMS. :clap:
  2. Special thanks goes to @renanmufalo for his cloneable project: https://webflow.com/website/Google-Maps-with-Multiple-locations-and-CMS now the Google maps are showing all my flats/apartments from the CMS. :clap:

My question is, how to connect these two function. :man_shrugging:
I would like to achieve filtering the markers on the Google Maps as well as the flats/apartments with the same filters. :point_left:

So if I’m filtering for example by the “Állapot” category, I would like to see only the filtered flats markers on the map. :sunglasses:

Hope that somebody can help me with this, because I got stuck :see_no_evil:.

My read-only link: https://preview.webflow.com/preview/new-housingbudapest?utm_medium=preview_link&utm_source=dashboard&utm_content=new-housingbudapest&preview=8938530d56929c7839407bd4af1bca48&mode=preview

For sure, if this website will be completed, I will be able to make a tutorial with clonable projects for everyone. :innocent:

Really appreciate any help You can provide! :pray:

Gabriel

1 Like
2

I found some information about filtering google maps markers here:

Now I’m trying to understand the codes and connect to my CMS dropdown filters.

I would really appreciate any helps. :pray:
Thank you!

3

Did it work? Looking forward to the tutorial and clonable project!

4

Hello @Gideon_Sylvan!

I couldn’t solve it alone, so I hired Chris Elson to do it. (Try to find him on FB = Webflow Designers group)
He builds custom components on Webflow. Highly recommended, trust me.

5

@Gabriel_Hajdok did you ever launch the website? I would love to see the finished project. I am working on a solution for a similar scenario.

Thanks!

6

Hello @BishopDesignWorks !

Yes I did, but the page load is too slow.

2 Likes
7

Thanks a lot for sharing, @Gabriel_Hajdok!

Do you know why the loading is so slow? I’m looking to do something similar, but will have to find an alternative solution if I can’t make it more performant with this approach.

Thanks!

8

Hello @joris_vanherp1,

It seems like:

  1. Before the page loads, the Google Maps needs to load. (But I’m not sure.)
  2. Before the Google Maps loads, all images need to load on the page. (That’s because Google Maps Marker uses images from the CMS collection.)

Unfortunately, I didn’t have time to figure out the solution for this.

Do you have any idea?

Best regards,

Gabriel

9

@joris_vanherp1 consider design with lighter home page and all these heavy request for Google Map leave for “Listing” page.

@Gabriel_Hajdok Based on Google Insights seems that huge delays are because of images.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.housingbudapest.hu%2Fapartments

10

@Gabriel_Hajdok Thanks for sharing your thoughts. I haven’t tried it, but I’ll experiment with it over the coming weeks.
@Martins_Brikmanis Thanks for the advice!

Best regards,
Joris

1 Like
11

Hi Gabriel,
I am looking for a similar solution for a multi vendor platform. I need a filterable map that shows all the stores that fit the choosen criteria.
It seems that you’re the only one talking about this and your site works! Great job!
Any chance to have a clonable project link as you mentioned in your post?
:pray:t2:

12

Hello Velea,

Unfortunately nobody could help and I had to pay a lot for a custom components - this project isn’t shared to be as a clonable. For more information and details please contact me on: hellohajdok@gmail.com

1 Like
13

Hey Gabriel, this dynamic map with location pins on it (https://ncf-map-demo.webflow.io/) might be a possible solution to your problem? Every pin is a Webflow CMS item. Every aspect except for how the actual map looks can be modified native within the Webflow designer. We designed it as a cloneable component with a little video tutorial to implement it – should take you around 10 minutes to get started.

For us having this component definitely was a game changer, because we often get the customer request to display their different locations on a map and we found this was the best possible way to do it within Webflow.

Map Vid

1 Like
14

HY, its amazng website . can i have permession to make a website on that plateform [Feedback](https://www.dramamix.online/)f

15

Hi!

If someone is still after a solution for this, I found one. I will post a cloable soon! I used Finsweet filters and the code from sabanna.

3 Likes
16

would love to see it!

17

Wow, would love to see this cloneable, were you able to do it? :wink:

18

Yes I did it! Had no time yet to create a clonable, will do it as soon I have time!

19

Great news! Ive been working on this for days also. I have no problem customizing the map like I want but I cannot figure out a way to filter the markers. If you have some hints in the meantime on how you used the attributes for your project it’ll be fantastic!!!

20

@JPMozis trying to post it tomorrow!

1 Like