Expand Map

Cards 2.8K

About

Click on this component to get a clean map street view with some details.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Expand Map to your project and fits it to your theme.

Code

How Expand Map is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { LocationMap } from "@/components/ui/expand-map"

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center w-full">
      {/* Subtle background gradient */}
      <div className="fixed inset-0 bg-[radial-gradient(ellipse_at_center,_rgba(52,211,153,0.03)_0%,_transparent_70%)]" />

      <div className="relative z-10 flex flex-col items-center gap-8">
        {/* Optional subtle label */}
        <p className="text-neutral-600 text-xs font-medium tracking-[0.2em] uppercase">Current Location</p>

        <LocationMap location="San Francisco, CA" coordinates="37.7749° N, 122.4194° W" />
      </div>
    </main>
  )
}