Components
Map pin
A map pin is a marker, usually a teardrop or dot, placed on a map to show one location, such as an office, a data center or a customer's city.
- Also called
- Map marker, Location pin, Location marker, Drop pin
- Browse examples
- Contact pages →
What is a map pin?
On SaaS marketing sites, map pins appear wherever a company wants to show where it is or how far it reaches. Contact and careers pages pin offices on a map so a candidate can see whether there is a team near them. Infrastructure and edge-network products pin regions or data centers on a world map to make "global" concrete.
The pin is usually stylized rather than a live map. A dotted world map with a few glowing dots, or a flat illustration with labeled markers, fits the brand better and loads faster than an embedded map widget. A live, zoomable map belongs on a contact page where people actually need directions.
Pins lose meaning when there are too many or none are labeled. A hundred dots across every continent says "big" and nothing else. Label each office pin with a city, and if the point is coverage, say the number in text beside the map.
When to use a map pin, and when not to
Use it for
- Physical officesVisitors may visit, apply to or want to know which time zone a team is in.
- Infrastructure claimsRegions, edge locations or data residency are a selling point.
- Global teamsA careers page wants to show remote or multi-office hiring at a glance.
Avoid it for
- One locationA single address is clearer as text with a link to a maps app.
- Decoration onlyA world map with random dots that don't mean anything is filler.
- Heavy embedsAn interactive map widget on a homepage costs load time for little benefit.
Anatomy of a map pin
- 1Map baseA world, region or city map, often dotted or simplified to match the brand.
- 2PinA teardrop, dot or pulse marker in the accent color.
- 3LabelCity or region name beside or above the pin.
- 4Detail cardAn optional popover with address, team size or a link, shown on hover or tap.
Common map pin variants
1. Office pins
A handful of labeled markers on the contact or careers page.
2. Region dots
Glowing dots on a dotted world map for data centers or edge locations.
3. Interactive map
An embedded map with clickable pins and a detail card.
Often confused with
Map pin vs. illustration
A decorative map illustration sets a global mood. Map pins carry information: each one marks a real place.
Frequently asked
Should I embed a real map or draw one?
Draw one for marketing pages: it matches the brand and loads instantly. Embed a real map only where visitors need directions, typically on a contact page with a single office.
How many pins are too many?
Once pins overlap and labels collide, switch to a count in text ("offices in 12 cities") with a list underneath, or group pins by region.