The Maps Express

Speed up your search flow to Google Maps!

Navigate places effortlessly with The Maps Express, experiencing rapid AI-integrated summaries or a single search key combination for minimal workflow disruption.

  

---

🚀 Introduction

The Maps Express is a browser extension designed to streamline your interaction with Google Maps. Whether you're browsing articles, watching videos, or planning a trip, this tool helps you quickly search for locations, get directions, and manage your favorite places with minimal interruption to your workflow. With features like quick search shortcuts, AI-powered summaries, and seamless integration with Google My Maps, The Maps Express is the perfect companion for any avid map user.

✨ Features

Action Features

• Quick Search: Use shortcuts (Ctrl+Shift+S / ⌘+⇧+S) or right-click on highlighted text to perform a quick search.
• Search Bar: Open the extension's search bar with a shortcut (Alt+Shift+S / ⌥+⇧+S) or by clicking the extension icon.
• Quick Directions: Get directions instantly by right-clicking on highlighted text (Alt+R / ⌥+R).

Database Features

• Search History: Automatically saves your last 10 searches for quick access.
• Favorites List: Save your favorite locations and import or export them as a CSV file.
• Delete Mode: Easily manage and delete items from your history and favorites.

AI-Powered Features

• Place Summary: Use the Gemini API to get AI-powered summaries of locations on the current page.
• Video Summary: Summarize locations mentioned in videos, using the same AI-powered summary feature.
• Auto-attach Map Links: Automatically detect and attach Google Maps links to place names on web pages.

---

🎬 Usage Demo

Check out our video demonstration on YouTube to see The Maps Express in action: https://youtu.be/xv0tVQAi3qo

---

🛠️ Installation and Setup

From the Chrome Web Store (Recommended)

The easiest way to get started is to install The Maps Express directly from the Chrome Web Store.

Local Development Setup

If you want to develop and test your own version locally, follow these steps:

1. Open Browser Extensions: Navigate to your browser's extensions page and click "Manage extensions".
   

2. Enable Developer Mode: Toggle on "Developer mode".
   

3. Load Unpacked Extension: Click "Load unpacked" and select the cloned project folder to complete the installation.
   

---

⚙️ Configuration

Keyboard Shortcuts

To customize the default shortcuts:

1. Open Extensions Page: Go to the browser extensions page and click "Manage extensions".
   

2. Select Keyboard Shortcuts:
   

3. Set Your Shortcut: Click the input field and type your desired key combination.
   

4. Set to Global (Optional): Change the shortcut scope to "Global" if you want to use it outside of the browser window.
   

Gemini API for AI Features

To enable the Place Summary and Video Summary features, you'll need a Gemini API key:

1. Sign in to Google AI Studio: Go to Google AI Studio and sign in.

2. Consent to Terms: Agree to the legal notice to continue.
   

3. Create API Key:
   

4. Create API Key in a New Project:
   

5. Copy Your Key: Copy the generated API key and paste it into the extension's settings.
   

---

🗺️ How to Use with Google My Maps

You can export your favorite places as a CSV file and import them into Google My Maps:

1. Open My Maps: In Google Maps, go to "Your places" > "Maps" and click "Create Map".
   

2. Create a New Map:
   

3. Import Data: Click the "Import" button.
   

4. Choose CSV File: Select the CSV file you exported from the extension.
   

5. Select Columns: Choose the columns to position your placemarks (default is "name").
   

6. Finish: Complete the import process.
   

---

🛠️ Tech Stack

• Manifest V3
• Bootstrap 5.3.0
• Gemini 2.0 Flash
• ExtPay (Payment Gateway)
• localStorage
• HTML iframe
• i18n (Localization)

---

📂 Project Structure

.
├── _locales/               # Localization files (en, zh_TW, ja)
├── dist/
│   ├── scripts/            # Functional scripts
│   ├── modules/            # Modular scripts
│   ├── popup.js            # Main script
│   ├── background.js       # Event handling and browser interaction
│   ├── contentScript.js    # Accessing webpage content
│   ├── inject.js           # Injecting iframe into the webpage
│   ├── ejectLite.js        # Ejecting iframe from the webpage
│   └── checkStatus.js      # Checking the status of the iframe
├── scss/                   # Style sources
├── images/                 # Extension icons and demo assets
├── vendor/                 # 3rd-party libraries
├── popup.html              # HTML for the popup interface
└── manifest.json           # Configuration file for the extension

---

🤝 Contributing

Contributions are welcome! If you have ideas for new features, improvements, or bug fixes, please open an issue to discuss it first. If you'd like to contribute code, please fork the repository and submit a pull request.

---

📄 License

This project is licensed under the MIT License.

---

📚 References

• Extensions - Chrome for Developers
• Chrome Extension 開發與實作 - 羅拉拉
• Localizing Your Chrome Extension - Shahed Nasser
• 簡單用 Chrome Extension 接 Gemini API - Wolke
• Prism - Redline Tool

---

✨ Contributors

• Chin-Hsuan Sun
• Michael Wu