Discover the best map websites created by professional designers. Get inspired and start planning your perfect map web design today!

Timothy Ricks

Watch the tutorial for this at https://www.youtube.com/watch?v=Wq5mJIHCDFo

T.RICKS Menu + Slider

ThreeSixtyEight

ThreeSixtyEight's Workspace

Watch the tutorial at https://www.youtube.com/watch?v=VqSEvzzLoVQ

Interactive CMS Map (Responsive - Collection List)

Watch the tutorial for this map at https://www.youtube.com/watch?v=Iz_6IBfCtBQ

SVG Map

Corey Moen

Highlight features, locations, items, etc. on images with the Webflow CMS. Multi-reference highlight items into each main gallery image item, and use a simple top and left coordinate value to set the location of the dot on the image. The structure of each highlight dot also leverages conditional visibility to adjust the position of the tooltip depending on the location of the dot in the image.

CMS Image Plotter

KC Katalbas

This map uses the CMS for each location and displays a popup and info card on click for each location. The items are placed using hidden a lat and long field and the rest of the information is displayed upong click. This approach does use custom JS and Jquery code found in the code editor. 

Video on how I made this:
https://youtu.be/Wd76ZwMCGzc

This site was made on top of an existing clonable by Corey Moen found here: 
https://webflow.com/made-in-webflow/website/cms-mapbox

CMS Map with Info Card using Mapbox

39 Digital

Create a style-able, CMS driven map using Mapbox and Webflow Collections.

Watch the video on how to use this here - https://youtu.be/aR4UE-xLTE8

CMS Map with Mapbox

Carlos Toledo

This project was developed using Mapbox Studio, Mapbox GL JS library and Webflow. Feel free to clone this project use it in your own way.

Charles Darwin and the Voyage of the Beagle - Interactive Map

An interactive, CMS-powered map that is built using Mapbox. The collection list that populates the map must have Lattitude and Longitude coordinates for each item, and you can populate any other CMS data you want within the popups for each point. This approach does require Javascript located in the page setting body code, and if you wish to modify it be sure to check out the great Mapbox documentation and examples at https://docs.mapbox.com/mapbox-gl-js/api/.

Interactive CMS Map w/ Mapbox

Renan Corrêa Múfalo

Google Maps with Multiple locations and CMS

Awasero

Clone this website and take advantage of a geolocation script, which fetches and displays location data for your users based on their IP addresses.

With this script, you can easily customize content and user experiences based on location, improve targeting for marketing campaigns, and gain valuable insights into user behavior. 

The script uses the GeoJS API and works asynchronously for fast loading times and seamless integration with your site. 

Geolocation Setup for Webflow

Refokus

Refokus Workspace

Arqitel is the evolution of real estate investing, using data science to select better cities, neighborhoods, and properties for long-term outperformance. 

Real-estate investment firm websites are boring? Not this one. 

With this new website, we created a continuous 3D (created with WebGL and animated with GSAP) animation to walk the user through a transition between their approach, and how migration data translates into investing in the right cities and neighborhoods, and ending with data driven building management. All in an engaging single page website that is a joy to interact with.

Arqitel

Abi Rana

Abi Rana's Workspace

Highlights
- No JS or Third-Party libraries
- Use custom image or SVG of map
- CMS based multi-location, add info as needed
- Interactive popups for markers

Use this cloneable to build a custom map where you can plot different locations, taking advantage of Webflow CMS data in embed block.

Very easy to implement and omit the burden to integrate any third party services, this should cover many use cases.

In tablet view and below, hover effect is disabled but the map list will be visible below. And another trick is that you can click on the map pointer/marker and it will scroll to that item position. Trick is just to apply ID on the map item.

Hover effect it done with custom CSS but that can also be done with Webflow interaction, interaction is also included in this build but not used.

Initially conceptualize for Apeture Hotels website https://www.aperturehotels.com/portfolio and later improvised
Also shared with Desiflow community on a build session https://twitter.com/desiflow_

Zero JS - Interactive CMS Map with Info Popup

A 3D world on how Cula's platform collects data from carbon removal processes and converts them into carbon credit certificates.

Cula

No Code Flow

A dynamic Webflow CMS location map with pins component that we offer for the Webflow community. It works native within the CMS and no third party stuff. Easy to implement and 100%-styleable within Webflow. ✨
👋 check us out → https://www.nocodeflow.net/webflowlocationsonmap

CMS Map with location pins – Cloneable No Code Flow component

Forrest O.

2d map, 3d globe, and geolocation utility that you can copy to your projects, with locations added from a collection. Uses https://www.webglearth.com/ or https://leafletjs.com/

Component: geo-components

Jetboost

Create beautiful, interactive maps for any location-based Webflow collection, without having to write a single line of code!

At Jetboost, we hope to empower you to take on the most challenging client projects and deliver them in record time. 🚀

Visit the link below to learn more about Jetboost CMS Maps:
https://www.jetboost.io/products/webflow-cms-maps

After you clone this project, you're able to import its prebuilt Jetboost setup into your own Jetboost account.

Questions? Email support@jetboost.io and we'd be happy to help!

CMS Map Demo (Dark) | Jetboost

Carlos Ruiz del Vizo

This is a dark CMS map for anyone to clone, it started as a car item but I made it a random data locator. 

Make sure to follow , clone or leave a comment!

Hope this helps

Dark CMS Map for Webflow

Hey there! 👋 

This is the cloneable you need to create a CMS-connected interactive Map in an airbnb like design for your company! Powered by No Code Flow's "Dynamic Map" for Webflow app.

This template is used to show the capabilities of our Dynamic Map for Webflow, which is built to enable all Webflow users to build a CMS-connected, interactive map with location pins without the use of custom code. In our template we used a clear class naming and structure to ensure its as easy to style as possible! 

Follow the tutorial to make sure the map works properly. 

You can also start from scratch. See more on:
https://www.nocodeflow.net/dynamic-map-for-webflow

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

⦿ Website →  www.nocodeflow.net
⦿ Twitter → www.twitter.com/nocodeflowwf
⦿ Youtube → https://www.youtube.com/channel/UCMzFisUzA732SKVXIPWyo1w

Interactive CMS Map – Real Estate Locations | No Code Flow

102022939

1026885926

102976941

1038319252

gpt-5-nano

1070795817

1098530826

gpt-4.1-mini

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1131232030

Custom code and scripts won’t be supported.

Custom code

You won’t be able to export HTML and CSS files.

Code export

You won’t be able to manage site-level access and publishing.

Site-level roles & permissions

{{count}} {{sites}} {{exceed}} client seat limit. Excess seats will be removed.

Client seats

Free guest access to client Workspaces won’t be available.

Guest access

Staging sites will be unhosted with limited CMS, and no passwords or redirects.

Staging sites

1138017326

claude-sonnet-4-5

1181518147

1186914386

claude-opus-4-6

1207293145

1249999967

1274323923

1338389614

140432223

1444732314

1462086697

1506258256

1514009179

1559290700

1567550242

1592612642

1609688815

1621889036

1631162196

1674778404

1692956854

1696523225

17004821

1726628865

173867728

173927913

1768015773

gpt-5.5

1771795565

1863160016

1870758752

1905118106

1919353748

193274770

1960278590

1975670756

1977767562

2025032126

2030598753

Outliant

Hireclix

Kinetic

Heco

2144870841

2147413158

2167006968

2216482092

2243824526

2250401860

225169335

2256326107

2320791503

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2401437500

2486364096

gpt-4o

gpt-5-mini

gpt-4o-mini

2493307210

2546957535

2556595834

2624148589

2639613659

265457401

2717840929

2749253609

2789269995

2842505721

284989039

285302288

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

2940878268

2972123611

3022611874

3023147062

3026881092

3040272982

3056387847

3057360577

3070246498

307653616

3099012871

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3162101956

301 Redirects

Custom Code

Code Export

Site Transfer

Join client workspaces for free and add up to 5 users from your workspace

Guest Access

Limited seats available, n sites will have client seats removed

Client Seats

Staging sites will be unhosted with limited CMS and no passwords or redirects.

Staging Sites

3201643127

3220870747

3238278814

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3417108561

3452464914

3458155273

gemini-3.6-flash

3497785011

3590523401

3591394191

3594629977

3661799733

Best Map Websites | Free Examples & Designs

Discover Map websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Map websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Map websites
built by the Webflow community