Build and Interactive Map with locations in the Webflow CMS with No Code Flow
Build and style a map with location pins right within the Webflow CMS. Transform your Webflow Collection List into a dynamic map with this No Code Flow component.
Because everything is 100% built and styled within Webflow, only using plain JS embeds for functionality, you can customize everything. Because no one wants a shitty iFrame that doesn't fit the overall visual approach of a website in 2022 anymore.
Once added to your project, you can just start to style the classes – like you do it with everything else you build in Webflow.
We'll send you a set of classes and some custom code, that you can add to your site with a little tutorial. We provide a text version and a video. It fells a bit like building an Ikea cupboard.
The whole data in the component comes out of the Webflow CMS, so that your clients can easily add and change items on the live website.
We took care of the functionalities and the code, so that you can focus on the style and User Interface.
There is no third party interface, no shitty surprise, no random UI bugs because everything is all in Webflow. If there is a problem, text us and we'll help you. As easy as that.
In case you just want to start super fast or are searching for style inspiration, we provide with a styled and ready to use version.
Webflow is charging you on a monthly basis, we don't. With the purchase of this tool you can add as many filters as you want within one Webflow project. Made for Agencys and Freelancer, because you simply use your client budget, but don't have to built it yourself.
Search and buy a component on the No Code Flow Website. The Payment fulfillment is 100% secure and run by Gumroad – this is more secure and easier for every one of us.
We'll send you this form to give us your Webflow account E-Mail address and to type in the license key you will get via E-Mail to verify your purchase. After that, we'll send you 2 projects to your Webflow account E-Mail address. The first will be the template file, in this case "NCF Calendar Styled Template" and the other one is the plain project, which you can style from 0 "NCF Calendar Plain Version".
Also you will get a little tutorial video to implement the component on your website.
After implementing the component, you will be able to scale every detail of it right within Webflow.
Things that might be unclear
FAQs
Can I see how it works before purchasing?
Yes! You can see the Webflow Demo of our Demo File. It is build with the exact same code that you're going to use to. You can even check it in the inspector if you want to.
Can I customise every UI element?
Yes, in our tutorial and the file we'll provide, you get a "template" for every different state, that you just can style. So can customize EVERYTHING.
Is there a pre-styled version?
Yes, we will provide you with the template file which you can style from zero and with our demo file that you modify in any way you want to.
For how many different sites can I use the component?
Per purchase you can add the item to 1 Webflow project. You can transfer the project while doing so, but you can't clone the site and use it double. The idea is that it's fair for you and your client. You save the hours of work for one single project. No monthly fee, just one single payment.
Is it possible to switch the breakpoint for the map?
Yes this easily possible right within webflow. In our demo file we used flexboxes to make the layout responsive.
Can I create multiple maps with multiple maps within one project?
Yes this is possible. You only have to keep the item limit of the Webflow CMS in mind. Please vote on the Webflow wishlist to increase the item limit (because it's a pain in the ass) → https://wishlist.webflow.com/ideas/WEBFLOW-I-2357
What maps are you using? Can I change the style of the map?
No this is not possible, because we use an open source tool named open street map to generate the map data. Custom map solutions like MapBox or Google Maps require expensive monthly fees. If you need help to implement something like this, don't hesitate to contact us via hello@nocodeflow.net.
Can I set a custom zoom level for the map?
No, because the default zoom level gets set automatically and always includes all visible pins at once to keep things simple for the user and for you.
What do other people say
Customer Feedback
Uros Mikic
Agency Owner
What you've done is excellent. Really worth the money!
Create a custom map with location pins and an overview list of the items within Webflow. The shown data within the location comes directly from within the CMS Collection. You can modify everything except the styling of the map itself.
Turn your Webflow website into an overview for different locations and link them to a subpage or another website. A component that works with up to 100 CMS items in Webflow and saves you a lot of time.
Easy editable for clients and yourself within the editor and ready for 100% custom Webflow styling.
Included in your purchase
You will get an E-Mail with all important data that you need to get started in your project
Plain Filter Version for a rapid styling from zero in your Webflow file
Pre-Styled Version (demo file) that you can instantaneously use within your project as a template
A video tutorial that guides you through the step by step installation guide
The License of your purchase for a one time usage with which you can make sure that you're using it legit
*this is a one time payment, once paid you can start immediately :)
* Why not just implement the official Google Maps component from Webflow?!
Well. That’s actually a good question. Would be easier, right? Just use Google Maps and that’s it. There is even a Google Maps Webflow component right within the Webflow Designer. Seems way easier than buying a component from some website on the internet, right? As you maybe guessed from our annoying way of asking, this not the case.
In the next 4 minutes, we will explain to you why you should consider using the No Code Flow interactive map over the official Webflow Google Maps component.
The limited features of Google Maps in the Webflow CMS
So what does this Google Maps component in Webflow do? So, this is kind of the problem: not too much. We will explain to you what's possible, what's not possible, and when you should consider using what solution for your project. Are you ready?
Want to show more than one item on your Webflow map?
For us the biggest disadvantage of the Webflow Google Maps implementation: the component allows you to show exactly ONE ITEM, meaning one address. That isn’t too much. Because when you want to show for example two locations of your company – well, that already isn't possible.
Unfortunately, without custom code embeds to take a more advanced use of the Google Maps API, there is no real way around this limitation. And even if you worked away around this, sometimes you run into issues. We saw a bunch of free components from the Webflow community built upon the Google Maps API. All of them didn't work as supposed to or seemed to be broken at all.
Google Map Component in the Webflow Designer panel + it's available settings
With the No Code Flow interactive map template for Webflow, the only limitations is the Webflow CMS collection list limit itself. You can easily add up to 100 locations within a dynamic map that has identical features as Google – including zoom and every other essential feature Google Maps offer.
Map items in the No Code Flow Webflow CMS Collection List
Want to create an interactive user experience around your map?
Well... there is not really a way to interact with the Google Maps Webflow component apart from the actual map itself at all. This leads to a very limited amount of possible user engagement. This makes creating a pleasant or interactive UX for your map in Webflow quite messy. The only way of really doing this, would once again be custom coding.
With the cloneable No Code Flow map on the other hand, you have more options to customise the map items. For example you can create a list right of the CMS generated map items right next to your interactive map. This allows you to show multiple locations and let people interact with them – on and next to the map. You can then include call to actions or every other element you can use within the Webflow Designer.
The No Code Flow interactive map for Webflow CMS that can contain multiple items.
Want that your map doesn’t break randomly?
With the Google Maps component in Webflow we also had some quite unpleasant experiences in terms of maintenance. Apart from the nice Google Cloud Platform interface *cough*, that makes the generation of a simple API key a nightmare, the Google Maps team seems to change stuff in their cloud environment randmoly without noticing its users. For example: a client called of our agency called us a few weeks ago. She asked us: “Why is the map on my website broken?”. And honestly, we had no idea. It turned out that Google changed something about our API key. And this didn't only happen to this website, but for every website which used our agencys Google Maps API key.
That led to us replacing API keys in over 20 different Webflow projects that were live at this very moment. We saw a lot of people to whom this was happening too.
Webflow Google Maps component is randomly breaking due to Google Maps API Key stuff
In the No Code Flow dynamic map component we use OpenStreetMap, a free and open-source library. This makes things easier since it allows us to modify the map in a lot of different ways within the development process – without fearing a random change that we couldn't have foreseen.
Another advantage of using OpenStreetMap is the transparency of costs. It's simple: open source = free! Using the Google Maps component on the other side can lead to an explosion of your costs at one point. After reaching 28.500 views per month using the Google Maps API things can get really price. You can see the details here.
Our vision of this interactive map for Webflow
We from No Code Flow build websites in Webflow for nearly 4 years. For us, it’s the only tool that makes web design a fun experience. At one point though we built so many workarounds, that we thought: why not share all of this work? It would be awesome if everyone could build more advanced Webflow websites without suffering so much as we did. We are part of the Webflow community and use every one of our tools in our own projects. Therefore, we have a big interest in developing the map further and share our other components as well.
So we'd love to get your opinion: If you have any feature idea, that you would need in a map component for Webflow contact us. With every feedback, you help us to enable you and other creatives to build more awesome Webflow websites. You can sign-up for our product updates and new drops here. Happy building!
So... for who did we build this?
People who build websites with Webflow and have no idea how to code
This tool helps with a high-quality prebuilt JS component which is fully integrated in Webflow. No coding required, 100% Webflow styleable, used in live websites and working at this very moment.
People that love to safe a load of money and time while building Websites in Webflow
To build this you’ll need between 10-16 hours. If you earn 70€ per hour you spent 700€-1.120€ on creating this filter list on your own. You save actually at least 679€ with this purchase.
.webp)
.webp)
.webp)
.webp)
.jpg)
