#What is MapFlow?

MapFlow is a premium Framer component for designers and developers who need more advanced location experiences than a basic embedded map. Powered by the Google Maps JavaScript API, it lets you create store locators, property maps, hotel maps, travel guides, office-location sections, event maps, and business directories directly inside Framer. It combines customizable markers, filters, clustering, distance calculations, responsive behavior, branded map styles, and multiple Google Maps view modes without requiring users to build the underlying mapping functionality from scratch.

#Features ⚡

• Interactive Google Maps: Add fully interactive Google Maps directly to Framer projects.

• Unlimited Custom Markers: Display as many locations as your experience requires.

• Advanced Markers: Add interactive markers with hover effects.

• Custom Marker Icons: Upload SVG, PNG, JPG, or WebP marker graphics.

• Marker Clustering: Automatically group nearby markers when displaying larger datasets.

• Category Filters: Let visitors narrow locations using configurable categories.

• Nearby Locations: Help users discover relevant locations around a primary point.

• Distance Calculation: Automatically calculate distances between locations.

• Custom Popups: Create informative marker popups with clickable links.

• Smart Auto-Fit: Automatically position the map around displayed locations.

• Multiple Map Views: Supports Roadmap, Satellite, Hybrid, and Terrain modes.

• Custom Map Styling: Use built-in styles, custom JSON styles, or Google Cloud Map Styling.

• Responsive Layout: Optimized for desktop, tablet, and mobile screens.

• Design Controls: Customize typography, colors, spacing, and overall appearance.

#Included Components/Templates

MapFlow focuses on providing one comprehensive mapping component with the controls required to create several different location-based experiences.

• Interactive Google Maps section

• Primary location configuration

• Unlimited location markers

• Advanced marker states and hover interactions

• Custom marker icon support

• Category filter box

• Nearby-location functionality

• Marker clustering

• Custom information popups

• Automatic distance calculation

• Responsive map layouts

• Built-in and custom map styling controls

• Roadmap, Satellite, Hybrid, and Terrain map views

#Pricing 💸

MapFlow is a premium Framer Marketplace component sold as a one-time purchase.

• Price: $19

• License: Single-Use License

• No recurring subscription is listed for the component.

• A Google Maps API configuration may still be required for the underlying Google Maps services.

#Integrations 🧰

• Framer

• Google Maps JavaScript API

• Google Maps Map ID

• Google Cloud Map Styling

• Custom Google Maps JSON styles

• SVG marker assets

• PNG, JPG, and WebP marker images