Website are about presenting information and answering questions in an efficient way. "Where" is a common question, and maps are perhaps the most efficient answer.
Depending on the platform you use, maps can simultaneously answer;
- Where is the place we're talking about?
- Where is it in relation to me, right now?
- How far away?
- What's the best route to get there? Driving directions, public transport, etc.
- Are there other, nearer options?
Solutions
Here we're going to skip over static solutions, such as an embedded image, and focus on dynamic solutions that allow;
- A dynamic UX that allows the user to zoom / pan, and center the map on their current location
- Dynamic data displayed on top of the map, in the form of map pins or bounded regions
Within this dynamic category, we'll divide solutions into two categories;
- Embedded solutions, which are displayed in the website, but use external data only as the map data source
- e.g. a simple Branch or Franchise locator, where the team wants to be able to easily add pins but does not need that data to be stored in the CMS. Airtable or a Google Sheet are better UIs for them.
- Integrated solutions, which can use Webflow-stored CMS data in the map generation
- e.g. a fully Branch locator, where each Branch also has its own Branch CMS page, and the site has collection lists showcasing those Branches as well
Both types of solutions are useful, and choosing one over the other depends entirely on your needs.
Embedded Solutions
Embedded solutions are much quicker to setup because the Webflow side is generally just an IFRAME embed. However they're also more limited in terms of how your site can utilize the maps.
A good example of an embedded solution is Atlist;
https://www.atlist.com/features
Integrated Solutions
These require more programming but have a much deeper level of site-integration capability. If you already have the map data in the CMS, you get to centralize that experience.
Mapbox
Cloneable - https://webflow.com/made-in-webflow/website/cms-map-with-mapbox?ref=made-in-webflow-search&searchValue=maps
Video - https://youtu.be/aR4UE-xLTE8
https://webflow.com/made-in-webflow/website/maptybox?ref=made-in-webflow-search&searchValue=maps
Mapty
https://maptybox.webflow.io/
Jetboost
https://webflow.com/made-in-webflow/website/jetboost-map-search-concept?ref=made-in-webflow-search&searchValue=maps
