---
title: "US Interactive Map — Framer component · Best of Framer"
description: "$20.00 · Framer component · by Kevin James · Maps. US map with CMS & manual link modes"
canonical: "https://framer.elliotli.dev/component/us-interactive-map"
---

[Home](/)/[Components](/components)/[Maps](/components/category/maps)/US Interactive Map

# US Interactive Map

US map with CMS & manual link modes

[View on Framer](https://framer.com/marketplace/components/us-interactive-map/?via=elliot-li)

![US Interactive Map preview image 1](https://framer.elliotli.dev/og/component/us-interactive-map/718785d1d82ad2d9/1600x1200.jpg)

## Summary

US map with CMS & manual link modes

## Description

Perfect for businesses, directories, real estate platforms, and service-based websites that need to direct users to state-specific content with a single click. Whether you're building a state-by-state directory, showcasing regional services, or creating a location finder — this component delivers a polished, professional experience with **zero coding required**.

### Key Features

Flexible Link Modes

-   **CMS Mode** — Connect to your Framer CMS collection and auto-generate URLs from state slugs (e.g., \`/states/california\`)
    
-   **Manual Mode** — Set individual URLs for each state directly in the property panel — perfect for linking to external sites or custom pages
    

### Mobile-Ready Dropdown

Automatically switches to a clean dropdown selector on mobile devices Fully customizable breakpoint (default: 768px) Three dropdown styles: \*Outlined\*\*, Filled, or Minimal Custom placeholder text, colors, fonts, and border radius

### Fully Customizable Styling

Default, hover, active, and disabled state colors Adjustable stroke color and width Smooth hover animations with customizable duration and easing Disabled states appear grayed out when no link is set (Manual Mode)

### Smart State Labels

Toggle labels on/off Customize font, size, weight, and colors Per-state label position overrides via JSON for perfect placement Leader lines for small states (DE, CT, RI, etc.)

### Accessibility

Built-In Keyboard navigation support ARIA labels and roles Focus states for screen readers Semantic SVG structure

### Lightweight & Fast

-   Pure SVG — no external dependencies
    
-   Optimized rendering for smooth interactions
    
-   Works seamlessly in Framer's visual editor
    

### Perfect For

Service area directories— "Find a location near you"

Real estate platforms— Browse properties by state

Business directories— State-by-state listings

Compliance & legal sites— State-specific regulations

Healthcare networks— Find providers by region

Education portals — Campus or program locators

Data visualization — Regional statistics display

E-commerce — Shipping zones or store locators --- ##

Property Controls

**Link Mode:** CMS Collection or Manual Links**CMS Settings:** Base Path, URL Template**Manual Links:** Individual URL input for all 50 states + DC**Styling:** Fill, Hover, Active, Disabled colors; Stroke**Animation:** Hover duration and easing**Labels:** Show/hide, font, colors, position overrides**Mobile:** Enable dropdown, breakpoint, style, colors**Active State:** Set via slug (great for CMS page binding)

## Rank history [How rankings work →](/terms#rankings)

-   All · #9717

## Details

- **Author**: Kevin James
- **Price**: $20.00
- **Published**: 2026-01-26
- **Updated**: 2026-01-26
- **Added**: 2026-01-13
- **Categories**: Maps

## More like this

-   [Waypoint](/component/waypoint) — Dev Ahsan · $9 — Photo-first locations map
-   [No-key Store Locator](/component/no-key-store-locator) — Sean Weekes · $15 — UK store finder, no Google API key
-   [Geo Office Location](/component/geo-office-location) — Design Foundry · Free — Interactive Global Office Showcase
-   [Map Locator CMS](/component/map-locator-cms) — sherwin · $15 — Map Locator CMS is a flexible, interactive map component for Framer that helps you showcase stores, offices, properties, venues, service…