Most maps on marketing pages are not maps. They are a picture that says "we are everywhere" or "we are here", and building them with a tile provider costs an API key, a billing account, a runtime and a monthly bill for something that never needed to be interactive.
Sorting map components by whether the reader can pan is the whole decision.
The decorative map
A stylised world with dots or arcs, no tiles, no provider. World Map by Manu Arora is the dotted-continent version with connection lines, and COBE Globe by shuding is the 5KB WebGL sphere with markers and arcs.
This is what a "global presence" section wants. It is an SVG or a small canvas, it has no key to leak and no quota to exceed, and it renders the same for everyone.
The location map
One place, shown on a real map, usually on a contact page. Map by Shailendra is the shape, an embedded map sized for a contact block.
The cheapest correct version of this is a static image: most tile providers offer a static endpoint that returns a PNG for a centre, a zoom and a marker. One image request, no JavaScript, no interaction. Make it a link to the provider's own app, because everyone who wants directions is going there anyway.
The interactive map
When panning, zooming and clustering are the product: a store locator, a fleet view, a listing search. Expand Map by Jatin Yadav is the expanding-panel pattern, and the mapcn set - Map, MarkerPopup and MapArc by Anmoldeep Singh - is the shadcn-shaped wrapper around a real map library.
Three things to decide before you start.
The provider and its bill. Tiles are priced per load or per thousand map views, and a map on a page that gets traffic is a line item. Know the free tier's shape before it is on the home page.
Markers past a hundred. Individual DOM markers stop being viable quickly. Clustering or a canvas layer is not an optimisation, it is the difference between a usable map and a frozen tab.
Load it on demand. A map library plus its style JSON plus tiles is one of the heaviest things a page can carry. If the map is below the fold, load it when it approaches the viewport, behind a placeholder image.
The part that is always missing
A map is a picture to a screen reader, and almost every implementation stops there.
Whatever the map communicates has to exist as text or as a list. Store locations belong in an addressed list beside or beneath the map; a "we operate in 40 countries" claim belongs in a sentence. That list is also what a search engine and an answer engine read, since neither can see the pins, and it is what makes the section work when the tile request fails.
Keyboard: an interactive map needs to be reachable and operable, or it needs to be excluded from the tab order with the information available elsewhere. A map that traps focus with no way to pan by keyboard is worse than a static image.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| A static tile image | One location, one request, no runtime | Nothing interactive |
| MapLibre / Leaflet | Real interaction on open or commercial tiles | A library, a style and a tile bill |
| COBE | A globe at around 5KB | Only globes |
| An SVG world map | Decorative coverage with no dependency at all | Not geographic in any useful sense |
| 21st | Decorative worlds, globes, and shadcn-shaped map wrappers | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a map, get the previews inline, and let the agent write the file.
Frequently asked
- Do I need a real map library for a marketing page?
- Usually not. A global presence section wants a stylised world with dots or arcs, which is an SVG or a small canvas with no API key, no quota and no bill. A single location wants a static tile image linked to the provider's app, since everyone who wants directions is going there anyway.
- When is an interactive map worth the cost?
- When panning, zooming and clustering are the product: a store locator, a fleet view, a listing search. Then decide three things first: the provider's pricing per map load, how markers cluster past a hundred, and lazy loading, since a map library plus style and tiles is one of the heaviest things a page can carry.
- How do you make a map accessible?
- Put whatever the map communicates in text as well. Store locations belong in an addressed list beside it, and a coverage claim belongs in a sentence. That list is also what search engines and answer engines read, since neither sees the pins, and it is what saves the section when a tile request fails.
- Why do many markers make a map freeze?
- Because each one is usually a DOM node positioned on every pan and zoom. Past around a hundred, clustering or a canvas marker layer stops being an optimisation and becomes the difference between a usable map and a frozen tab.