An interactive AI-powered map explorer that helps you discover locations and create detailed day itineraries. Built with Google Maps API and Google Gemini AI, featuring a beautiful Apple-inspired design interface.
- Explorer Mode: Discover multiple points of interest related to any query. Perfect for exploring locations, historical sites, landmarks, and routes.
- Day Planner Mode: Create structured day itineraries with:
- Specific visit times and durations
- Logical sequence of locations
- Travel routes with transportation methods
- Realistic scheduling considering travel time
- Dynamic Markers: Color-coded pins (red for unselected, blue for active)
- Route Visualization: Animated lines connecting locations with transportation details
- Smart Bounds: Automatic map fitting to show all relevant locations
- Click Interactions: Click markers or cards to highlight and navigate
- Carousel Display: Scrollable sidebar with location cards
- Rich Information: Each card shows name, description, coordinates, and duration
- Visual Feedback: Active card highlighting with corresponding map marker updates
- Query Display: Shows your current search query at the top of the carousel
- Chronological View: Right sidebar displaying your day plan in timeline format
- Time-based Organization: Activities sorted by visit time
- Transportation Details: Shows travel methods and times between locations
- Interactive Management:
- Click items to navigate to locations on map
- Delete items with confirmation modal
- Export your plan as a text file
- Apple-Inspired Design: Clean, modern interface with glassmorphism effects
- Smooth Animations: Transitions and hover effects throughout
- Responsive Layout: Works seamlessly on desktop and mobile devices
- Confirmation Modals: Prevents accidental deletions or mode switches
- Mode Notifications: Visual feedback when switching between modes
- Node.js (v18 or higher)
- npm or yarn
- Google Maps JavaScript API key
- Google Gemini API key
- Clone the repository:
git clone <repository-url>
cd "HCI AI MAP"- Install dependencies:
npm install-
Configure API keys:
- Open
index.html - Replace
"ADD YOUR API KEY HERE FROM GOOGLE MAPS JS"with your Google Maps API key (line 187) - Create a
.envfile in the root directory:
GEMINI_API_KEY=your_gemini_api_key_here
- Open
-
Start the development server:
npm run dev- Open your browser and navigate to the local development URL (typically
http://localhost:5173)
- Enter any location-related query in the search bar (e.g., "Famous landmarks in Paris", "Historical sites in Rome")
- Click the search button or press Enter
- Explore the locations on the map and browse through the location cards
- Click on cards or markers to highlight and navigate to specific locations
- Toggle "Day Planner Mode" switch at the bottom of the screen
- Enter a query like "Create a day plan in Tokyo" or "Design a day trip in New York"
- The AI will generate a structured itinerary with:
- Specific visit times
- Duration estimates
- Travel routes between locations
- Transportation recommendations
- View your plan in the timeline sidebar on the right
- Click timeline items to navigate to locations
- Delete unwanted items or export your plan
- Use natural language queries - the AI understands context
- In Day Planner Mode, be specific about the location and type of activities you want
- The timeline automatically sorts activities chronologically
- Export your plan to save it for later reference
- Frontend Framework: Vite + TypeScript
- Maps: Google Maps JavaScript API
- AI: Google Gemini 2.5 Flash (via @google/genai)
- Styling: Custom CSS with glassmorphism effects
- Icons: Font Awesome 6.4.0
- Fonts: Inter (Google Fonts)
HCI AI MAP/
├── index.html # Main HTML structure
├── index.tsx # TypeScript application logic
├── index.css # Styles and animations
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite build configuration
├── logo.png # Application logo
└── README.md # This file
The application follows Apple's Human Interface Guidelines, featuring:
- Glassmorphism: Translucent backgrounds with blur effects
- Smooth Transitions: All interactions have fluid animations
- Clear Visual Hierarchy: Important elements are emphasized through color and positioning
- Accessibility: High contrast, readable fonts, and intuitive interactions
- Minimalism: Clean interface that doesn't overwhelm the user
Create a .env file in the root directory:
GEMINI_API_KEY=your_api_key_here- Get your API key from Google Cloud Console
- Enable the following APIs:
- Maps JavaScript API
- Places API (optional, for enhanced location data)
- Add your API key in
index.htmlline 187
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build
The application uses Google Gemini AI to understand natural language queries and extract:
- Location names and coordinates
- Descriptions and context
- For Day Planner Mode: times, durations, sequences, and travel routes
- Marker Highlighting: Clicking a card or marker updates all related UI elements
- Automatic Bounds: Map automatically adjusts to show all relevant locations
- Route Animation: Day Planner Mode shows animated dashed lines between locations
- Chronological Sorting: Activities automatically sorted by time
- Transportation Integration: Shows travel details between locations
- Export Functionality: Download your plan as a formatted text file
This is a private project, but suggestions and feedback are welcome!
- Google Maps Platform for mapping services
- Google Gemini AI for intelligent location processing
- Font Awesome for icons
- Apple Human Interface Guidelines for design inspiration
Built with ❤️ for exploring the world, one query at a time.