Maps from the Kombai gallery: a stay-booking site's price pins, a surplus-food marketplace's vendor map and a maps app's turn-by-turn directions.
What is a map?
A map is an interactive view of a real area, with markers, routes or shaded regions placed on top of it. People pan and zoom to explore, and select a marker to see details about that place.
- Markers, lines and shaded areas sit on a base map of land, water and roads.
- Zoom and location controls float over the map, usually in a corner.
Maps show up across event detail, order detail and dashboard screens.
When to use a map
- Location decidesPeople choose by distance or neighborhood, like a stay or a pickup point.
- Routes and progressA trip, a delivery or a run that moves across a place.
- Patterns by regionData that changes with place, like visitors by country.
When not to use one
- Location barely mattersIf people pick by price or name, lead with a list.
- One fixed addressShow the address with a static map image and a directions link.
- Exact comparisonsFor values people compare closely, use a table or a bar chart.
Anatomy of a map
This one works. Pick a cafe, zoom in to split the cluster, or tab to the map and pan with the arrow keys.
- Pin
- Selected
- Cluster
- Keyboard focus
- Base mapLand, water and roads
- MarkerOne pin per place
- ClusterNearby pins merged
- Place cardDetails for the selected pin
- ControlsZoom and reset
- StatesPin, selected, cluster, focus
Map variants
We sorted every map design in the Kombai gallery and found six patterns. Browse all 68 web and 48 mobile designs.
1. Pin maps
The default. A pin for each place, often colored or iconed by category, with a card for the one people select.
2. Price and count markers
Markers that carry a label, like a nightly price or a number of places, and clusters that merge nearby pins into one bubble.
3. Route maps
A line drawn from start to finish, with the time, the distance or the next turn beside it.
4. Location pickers
A pin fixed in the center while people drag the map under it, then confirm the spot with one button.
5. Data maps
World maps and globes shaded by value or dotted with live activity, inside analytics dashboards.
6. Map insets
A small, mostly static map inside a card that shows one address, with a link to directions.
Where maps show up
Search results
Homes, rental cars and childcare listings split the screen between a results list and a pin map.
Delivery and ride tracking
A live marker moves along the route while a panel shows the driver, the order and the arrival time.
Store finders
Nearby branches as pins, with the selected store, its distance and its hours in a card or list.
Runs, rides and hikes
Recorded routes traced on the map, with pace, distance or elevation next to them.
Map vs similar components
Build notes
- Make each marker a <button> named after its place, so every pin is in the tab order.
- When the map has focus, let the arrow keys pan and the + and - keys zoom.
- Cluster markers that overlap, and split clusters into pins as people zoom in.
- Style the selected marker differently, and keep it in view next to its place card.
- List the same places outside the map. A map is a complex image and needs a text alternative.
- Ask for location only when someone taps locate. The browser shows a permission prompt first.
FAQ
How do you make a map accessible?
Name every marker and make it reachable by keyboard, then offer the same places as a list or table. A screen reader cannot read the map image itself, so it needs a text alternative that carries the same information, like any complex image.
Should map pins cluster?
Yes, when pins overlap at the current zoom. Show the count in the cluster bubble, split it into single pins as people zoom in, and zoom in on the cluster when someone selects it.
Should a results page open on the map or the list?
Open on the list when people choose by price, rating or name, and on the map when distance decides, like a stay near a venue. Offer a switch either way, and keep the selected item in sync between the two views.
Embed an interactive map or a static image?
For one address on a booking or contact page, a static map image with a directions link is enough and loads faster. Use an interactive map when people need to explore, compare places or follow a route.
What's the difference between a pin, a marker and an annotation?
They are the same thing under different names. People say pin, web map libraries usually say marker, and Apple's MapKit calls them annotations.
Related terms
All glossary terms · Browse 68 web and 48 mobile map designs