The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Framer can't put CMS data on a map natively. So I built a component that does.
Pins come straight from the collection add a listing, the pin appears. No second place to maintain. Drops into any Framer project.
See it in action → https://www.framer.com/community/marketplace/templates/efie/
Smart Framer solution—letting CMS-driven map pins flow directly into projects is both elegant and practical.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Introducing MapFlow 2.0: map, sidebar and popups in one Framer component
MapFlow 2.0 is a custom Google Maps component for Framer. Add locations with images, ratings, prices and details, then show them with category filters, search, clustering and polished popups. Everything is set from the property panel, no code.
Built for Framer, fully controlled from the property panel.
What’s new in 2.0
Sidebar with Image Cards or Category List. Show locations as image cards with rating, price and address, or as a clean drill-down list by category.
Search and category filters. Visitors search by name and filter with pills; the map reframes to match.
Rich popups. Image, category badge, star rating, price, address, details and a call-to-action button, each one toggled on or off.
Standard or Group markers. Use plain markers for a simple map, or group locations into categories with their own pin style and color.
Primary Location. Highlight your HQ, store or event venue with its own star pin and popup.
Smart clustering. Dense areas collapse into clean bubbles and expand as you zoom.
Auto distance. Show how far each place is from your primary location.
Bulk import. Paste a JSON or CSV list and add dozens of locations at once.
Easy coordinates. Type decimal degrees or degrees and minutes (21° 36' N).
Mobile-ready. On small screens the sidebar becomes a bottom sheet.
Full styling control. Map presets (Silver, Minimal, Grayscale, Night, Retro), custom JSON styles, native font controls, colors, radius and more.
Great for
Travel guides, real estate listings, restaurant and store locators, coworking and healthcare directories, event maps and city guides.
Demo data
The preview uses a fictional Jaipur City Guide (hotels, restaurants and experiences) to show every feature.
How to use it
- Drop MapFlow onto your canvas.
- Add your Google Maps API key.
- Add locations or paste an import list.
- Pick a sidebar layout and style it.
Clustering plus category filters in a no-code component is a big deal for location-heavy sites. The image card sidebar with ratings and prices makes it feel like a proper directory.
just launched TwistCard, free Framer component. 🌀 add an image and it'll turn in 3D as you scroll. It wrings like a piece of paper: far edge lags, the middle bends, the light rolls across the surface. That lag is my favourite part. 📄
Triggers: scroll (set how many turns), in view, hover, click, loop, drag with snap, or manual. the back can be the same image mirrored, a second image, or a colour.
it renders with WebGL at screen resolution so the image stays nice and crisp at any size.
https://www.framer.com/marketplace/components/twistcard/
The far edge lagging while the middle bends really sells the paper feel. Nice that it renders with WebGL at screen resolution so images stay crisp at any size.
Got another component sell on Framer!!
