setup
COMPONENTS
INTEGRATIONS
FAQ
How to Add a Custom Popup to Map Markers in Framer
Element: Marker Popup
A popup that opens when a visitor clicks a marker. Unlike the hover popup, this can show a fully custom design - any component you build in Framer.
Turn it on/off and set it up under Elements → Marker Popup.
Setup
Turn on Enabled.
A Marker popup connection slot appears at the top level of the component (outside the Elements section) - connect your own popup design (a Framer component) to it.
Use Field Mappings to send your data into that popup design - see below.
Style the Close Button (Size, Icon, Background, Border, Radius).
Sending data into the popup (Field Mappings)
Each row in Field Mappings has:
Field - the name of the data field (from your manual point or CMS row).
Popup Variable - the property name on your connected popup component that should receive it.
For step-by-step details on how this connects to manual points, see Manual Data Source.
If you're using Manual data, any field whose Name exactly matches a property on your popup component fills in automatically - you only need a mapping if you want to rename it. If you're using CMS data, nothing fills in automatically - every field shown in the popup needs an explicit mapping.
Collection Route
If you're using a CMS collection and want the popup to link to that item's page, set Collection Route to the CMS collection's page. The link is only generated automatically for CMS data - manual points don't get an automatic link.
