Streaming live at 10am (PST)

Searchable Map - Multiple Locations

Hey Webflow community,

Looking to implement a searchable map that would show business partners near the user.
I am not a developer so ideally something more plug and play would be best but still something customizable.

Let me know of what you use/have used!

When you say that you want a searchable map, are you looking to have the ability to actually type businesses etc, or do you want a Google Map showing multiple fixed locations?

I would like them to be shown by type/category of business that can be chosen by the user. The “searchable” part would be the user to input their location, city, postal/zip code, etc.

Ah, can’t help then unfortunately. If you ever need to know the code required to use custom lat/long positions on Google Maps in Webflow then I can help haha.

Interested in something like this as well. Part of my site has a place/directory section of local businesses, much like Yelp, and it would be really great to display businesses on a map based on visitor distance, a search or category.

I am able to display the business on a map on single pages but don’t know how to do multiple business yet.

@hobokencloud

Here is what I’ve managed to find so far:

MapHub: So far my favourite, still in beta and free for now.
MapBox: More customization, more developer-centric, pricing seems reasonable.
Google My Maps: Easy to use but not much customization.
PlaceGuru: Haven’t played enough yet to know.

Theres an article here that compares a few of them too.

Like I said, so far MapHub is my favourite, embedding is easy (iframe) and seems to be decently customizable.

@Noel_Fenez thanks for sharing those - bookmarked MapHub and MapBox for future projects!

Thanks, @Noel_Fenez. This list is great. I have tried MapBox before but need to dig deeper through the documentation to experiment with it more. My challenge is having the address field from multiple items on a collection call the API to retrieve and display various locations on one map.

Similar to something like the image attached.

Hi @Noel_Fenez

I think the solution (or rather a workaround) is pretty simple - all you have to do is use the standard google maps - with an API - then you have a CMS with all your partners locations listed and you create a map with all of the locations displayed on load… . then once your user opens the map and it identifies or searches for his location it will show him on the map and around him will be the markers that you placed from your CMS (your partners) - if any exist…

1 Like

@IVG I think that can work, the only issue I see is dividing the locations by business category that users can choose.

Ex: Choosing “clothing” only shows clothing partners, choosing “markets” only shows markets around them.

MapHub and Google Maps have this built in but ideally I would be able to change the UI to something that matches the site, not something available (that I know of).

I think you can do this using mixitup library - here is a tutorial

so then you will need to have mixitup sort your data and create various array’s that will be passed into google maps to create markers

2 Likes