# Maps Location Design

> Map-based interface design including geolocation, markers, directions, and location search.

- Skill: `dragoon0x/maps-location-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/maps-location-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/maps-location-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/maps-location-design

---


# Maps Location Design

## Map Interface
- Full viewport map with overlay controls.
- Pinch-to-zoom on mobile. Scroll zoom on desktop (with modifier key).
- Current location button (bottom-right).
- Search bar overlay (top).

## Markers
- Cluster markers when zoomed out.
- Interactive popups on click/tap.
- Color/icon differentiation by category.
- Selected marker highlighted with larger/different style.

## Directions
- Start + End inputs with swap button.
- Multiple transport modes: drive, walk, transit, bike.
- Route preview on map with time/distance.
- Turn-by-turn list alongside map.
- Real-time navigation with voice guidance (mobile).

## Location Search
- Autocomplete with address suggestions.
- Recent locations.
- Category search: "coffee shops near me."
- Results as list + map pins simultaneously.