GeoAI-Navigator

A sample web application demonstrating how to integrate Google’s Gemini generative AI with the Google Maps Platform (Maps JavaScript API) using TypeScript and Vite.

Table of ContentsFeatures

1. Features
2. Prerequisites
3. Getting Started
4. Environment Variables
5. Folder Structure
6. Usage
7. Contributing
8. License

Features

• Multimodal Place Recognition: Upload an image and ask the Gemini API “Where can I see this?”
• Text Prompt Refinement: Use the Gemini API to enhance and refine user-generated review text.
• Photorealistic 3D Map (Experimental): Render a tilt‑and‑heading controlled 3D map view.
• Geocoding: Convert AI‑generated place names into latitude/longitude coordinates.
• Nearby Lodging Search: Retrieve and display lodging options around the identified location.
• Split-Layout UI: Display interactive map and place overview cards in a responsive split layout using Google’s Extended Component Library.

Prerequisites

• Node.js (v16+)
• npm or yarn
• A Google Cloud project with:
  • Gemini AI enabled
  • Maps JavaScript API enabled

Getting Started

1. Clone the repository

git clone https://github.com/CodeRTX/GeoAI-Navigator.git
cd GeoAI-Navigator

2. Install dependencies

npm install
# or
yarn install

3. Setup environment variables (see Environment Variables)
4. Start the development server

npm run dev
# or
yarn devVisit

5. http://localhost:5173 in your browser.

Environment Variables

Create a file named .env.local in the project root with the following keys: VITE_GEMINI_API_KEY=YOUR_GEMINI_API_KEY VITE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_API_KEY

Note: The .local suffix prevents accidental commits of sensitive keys to source control.

Folder Structure

GeoAI-Navigator/
├── public/                # Static assets (index.html, favicon)
├── src/                   # Application source code
│   ├── main.ts            # Entry point
│   └── style.css          # Basic styles
├── .env.local             # Environment variables (not shown)
├── .gitignore
├── package.json
├── tsconfig.json
├── vite.config.js
└── README.md

Usage

Contributing

Contributions are welcome! Please open an issue or submit a pull request with a clear description of your changes.

License

This project is licensed under the Apache License 2.0.

References & Resources

• Photorealistic 3D map (Experimental) in the Maps JavaScript API
• Geocoding Service, Maps JavaScript API
• Nearby Search (New) in the Places Library, Maps JavaScript API
• Extended Component Library (beta) for the Maps JavaScript API providing the split layout and the Place Overview components.