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.

  

---

Contents

• Extension
  • Features
  • Usage Demo
• Instrcution
  • Set Up
  • Shortcut
  • Gemini API
  • Google My Maps
• Project
  • Techstack
  • Structure
• Reference
• Contributor

---

Features

1. Quick Search: Use shortcuts (Ctrl+Shift+S / ⌘+⇧+S) or right-click highlighted text for quick searches, ideal for reading web pages.
2. Search Bar: Use shortcuts (Alt+Shift+S / ⌥+⇧+S) or click to open the extension, ideal for watching videos.
3. Search History: Saves up to 10 locations for quick redirection to Google Maps.
4. Favorite List: Click the PATCH PLUS icon on the right to save. Import or export favorites as needed.
5. Delete Mode: Simply check and delete items.
6. Place Summary: Set up the API key to summarize the locations on the current page. Results will be preserved for 1 day.

---

Usage Demo

Youtube URL: https://youtu.be/xv0tVQAi3qo

---

Set Up

If you want to develop and test your own version locally, you can follow these steps to install it in your browser for testing:

1. Open the browser extensions page and click "Manage extensions"

2. Open "Developer mode"

3. Click "Load unpacked" to open the folder you cloned to complete the installation

---

Shortcut

If the shortcut doesn't work or you want to change it, follow these steps to adjust your browser:

1. Open the browser extensions page and click "Manage extensions"

2. Select "Keyboard shortcuts"

3. Click the input field and type the shortcut

4. Change to "Global" level (if necessary)

---

Gemini API

To apply the API key for the place summary and auto-attach links feature, you need to follow these steps:

1. Sign in Google AI Studio\
2. Consent to Legal Notice & Continue

3. Create API key

4. Create API key in new project

5. Copy

---

Google My Maps

You can follow the steps below to use the exported CSV file to import places in Google My Maps:\

1. Open My Maps in Google Maps

2. Create a new map

3. Click import button

4. Choose exported CSV file to import

5. Choose columns (default is "name")

6. Finish import

---

Techstack

• Manifest V3
• Bootstrap 5.3.0
• Gemini 1.5 Flash
• ExtPay payment gateway
• localStorage
• html iframe
• i18n localization

---

Structure

• _locales/: Message localized for current locale
  • en/: English (default)
  • zh_TW/: Chinese (Taiwan)
  • ja/: Japanese
• dist/: JavaScript & CSS resources
  • popup.js: JS for the popup window
  • popup.css: CSS for the popup window
  • background.js: Event handling and browser interaction
  • contentScript.js: Accessing webpage content
  • iframe.css: CSS for the iframe window
  • inject.js: Injecting iframe into the webpage
  • ejectLite.js: Ejecting iframe from the webpage
  • checkStatus.js: Checking the status of the iframe
• popup.html: HTML for the popup window
• manifest.json: Configuration file for the extension

---

Reference

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

---

Contributor

• Chin-Hsuan Sun
• Michael Wu