Give your visitors a truly premium property browsing experience with the Real Estate Map. Designed for high-end real estate agencies, luxury directories, and architectural portfolios, this component brings interactive, auto-centering maps directly to your Framer canvas.
No need to mess with complex longitude and latitude coordinates. Simply type in the addresses, and the map does the heavy lifting for you!
Smart Auto-Geocoding: Just type a plain text address (e.g., "155 Franklin St, New York"). The component automatically fetches the coordinates behind the scenes.
Dynamic Auto-Centering: The map automatically calculates the perfect zoom and center point to fit all your active properties perfectly on the screen.
Premium Hover Tooltips: Beautiful, animated image previews appear when hovering over map markers, featuring dark gradients, glassmorphism details, and crisp Manrope typography.
Interactive List Synchronization: Hovering over a property in the sidebar highlights its pin on the map, and clicking it smoothly flies the camera to that specific location.
Fully Customizable: Switch between Dark and Light map themes, adjust the premium accent colors (default is a luxury gold), and change typography directly from the Framer properties panel.
Responsive Ready: The layout automatically adapts from a sleek side-by-side view on desktop to a stacked, touch-friendly layout on mobile.
1. Drag and drop the component onto your canvas.
2. In the properties panel on the right, customize your default City to give the geocoder geographic context.
3. Add your properties in the array control: set titles, prices, raw addresses, and link your property images (Unsplash or direct URLs work best).
4. Paste the URL of your individual property pages in the "Link" field.
5. Hit Preview and watch the map magically build itself!
Eneko Lekue
