Google Maps Coordinate Extractor

🚀 Live Demo

A modern, bilingual web application that extracts latitude and longitude coordinates from Google Maps URLs and displays them on an interactive map with a luxury dark theme. Built with Next.js 16, React, and TypeScript.

Features

• Multiple URL Format Support: Works with various Google Maps URL formats including:

  • Full Google Maps URLs (https://www.google.com/maps/...)
  • Shortened URLs (https://maps.app.goo.gl/...)
  • Direct coordinate URLs (@latitude,longitude)
  • Place URLs with coordinates

• Interactive Luxury Map: View extracted coordinates on an interactive MapLibre GL map with elegant gold pin markers and dark theme

• Bilingual Interface: Seamlessly switch between English and Arabic with full RTL support

• Loading States: Elegant skeleton loading animations with shimmer effects while processing URLs

• URL Unshortening: Automatically resolves shortened URLs with redirect handling and timeout protection

• Responsive Design: Works perfectly on desktop, tablet, and mobile devices

• Luxury Dark Theme: Premium aesthetic with deep blacks, gold accents (#d4af37), and sophisticated animations

• No API Keys Required: Uses MapLibre GL JS with free CartoDB tiles - completely open-source with no registration or configuration needed

How It Works

1. Paste URL: Copy any Google Maps link (long or short) into the input field
2. Extract: Click the "Extract Coordinates" button
3. View Results: See the extracted latitude and longitude coordinates
4. Explore Map: View the location on an interactive map with a gold pin marker

Technology Stack

• Framework: Next.js 16 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui
• Maps: MapLibre GL JS with CartoDB dark tiles (free, open-source, no API key)
• Icons: Lucide React
• Theme: Custom luxury dark theme with gold accents

Project Structure

├── app/
│   ├── api/
│   │   └── extract-coordinates/
│   │       └── route.ts          # API endpoint for coordinate extraction
│   ├── layout.tsx                # Root layout
│   ├── page.tsx                  # Home page
│   └── globals.css               # Global styles
├── components/
│   ├── coordinate-extractor.tsx  # Main extractor component
│   ├── map-view.tsx              # Interactive map component
│   └── ui/                       # shadcn/ui components
├── lib/
│   ├── translations.ts           # Bilingual translations (EN/AR)
│   └── utils.ts                  # Utility functions
└── README.md

API Endpoint

POST /api/extract-coordinates

Extracts coordinates from a Google Maps URL.

Request Body:

{
  "url": "https://maps.app.goo.gl/..."
}

Response:

{
  "latitude": 40.7128,
  "longitude": -74.0060,
  "originalUrl": "https://maps.app.goo.gl/...",
  "finalUrl": "https://www.google.com/maps/..."
}

Error Response:

{
  "error": "Invalid URL format or coordinates not found"
}

Supported URL Formats

The extractor supports multiple Google Maps URL patterns:

• /@{lat},{lng},{zoom}z
• /place/{name}/@{lat},{lng}
• ?q={lat},{lng}
• /maps/place/{coords}
• !3d{lat}!4d{lng} (encoded format)

Map Features

• WebGL Rendering: Modern, hardware-accelerated map rendering for smooth performance
• Interactive Navigation: Pan, zoom, and explore the map with fluid animations
• Luxury Gold Pin Marker: Custom gold pin (#d4af37) with elegant glow effects on hover
• Popup Information: Click the marker to view coordinates in a styled popup
• Dark Theme: CartoDB dark tiles for premium aesthetics with MapLibre GL
• Responsive: Map adjusts to different screen sizes with excellent performance
• Fully Open-Source: MapLibre GL JS is 100% open-source with no vendor lock-in
• No Configuration: Works out of the box with free CartoDB tiles

Languages Supported

• English (EN): Default language with left-to-right layout
• Arabic (AR): Full RTL support with Arabic translations

Switch between languages using the language toggle button in the top-right corner.

Development

This project uses the Next.js runtime which automatically handles:

• Dependency resolution from imports
• Server Actions and Route Handlers
• No API keys or external services required

Deployment

Deploy this app to Vercel with one click:

1. Click the "Publish" button in the v0 interface
2. Your app will be deployed to a production URL
3. Share your coordinate extractor with the world!

Error Handling

The application includes comprehensive error handling for:

• Invalid URLs
• Network timeouts
• Malformed Google Maps links
• Redirect failures
• Missing coordinates

Accessibility

• Semantic HTML elements
• ARIA labels for screen readers
• Keyboard navigation support
• High contrast color schemes
• RTL support for Arabic language
• Interactive map accessible via keyboard

Design System

Color Palette

• Primary Background: #0a0a0a (Deep black)
• Secondary Background: #1a1a1a (Charcoal)
• Accent: #d4af37 (Luxury gold)
• Text Primary: #e5e5e5 (Off-white)
• Text Secondary: #a3a3a3 (Muted gray)
• Border: #2a2a2a (Subtle divider)

Typography

• Clean, refined spacing
• Uppercase tracking for headers
• Monospace for coordinates
• Smooth letter-spacing for luxury feel

Animations

• Fade-in transitions on load
• Shimmer effects on loading states
• Hover glow on interactive elements
• Smooth color transitions (0.2-0.3s)
• Pin marker scale and glow on hover

License

MIT

---

Built with ❤️ using v0 by Vercel