@gui-chat-plugin/google-map

Google Map location plugin for GUI Chat applications. Display locations on an interactive map.

Features

• Show any location by name or address
• Google Maps embed integration
• Fallback link to open in Google Maps
• Support for coordinates (lat/lng)

Installation

yarn add @gui-chat-plugin/google-map

Usage

Vue Integration

// In src/tools/index.ts
import MapPlugin from "@gui-chat-plugin/google-map/vue";

const pluginList = [
  // ... other plugins
  MapPlugin,
];

// In src/main.ts
import "@gui-chat-plugin/google-map/style.css";

Core-only Usage

import { executeMap, TOOL_DEFINITION } from "@gui-chat-plugin/google-map";

// Show a location
const result = await executeMap(context, {
  location: "Tokyo Tower, Japan",
});

API

MapArgs

interface MapArgs {
  location: string; // Location name, address, or coordinates
}

MapToolData

interface MapToolData {
  location: string | { lat: number; lng: number };
}

Google Maps API Setup

This plugin requires a Google Maps API key with several APIs enabled.

Step 1: Create a Google Cloud Project

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Make sure billing is enabled for the project

Step 2: Enable Required APIs

This plugin requires the following 4 APIs. Enable all of them:

| API | Purpose | Enable Link | |-----|---------|-------------| | Maps JavaScript API | Interactive map, markers, controls | Enable | | Places API (New) | Search locations by name | Enable | | Directions API | Route calculation between points | Enable | | Geocoding API | Convert addresses to coordinates | Enable |

Note: You can use either "Places API" (legacy) or "Places API (New)".

Troubleshooting: If the map doesn't work, check APIs & Services > Enabled APIs to verify all 4 APIs are enabled. Also check if any API has quota limits or restrictions in its settings.

Step 3: Create an API Key

1. Go to APIs & Services > Credentials
2. Click Create Credentials > API key
3. Copy the generated API key
4. (Recommended) Click Edit API key to add restrictions:
   • Application restrictions: HTTP referrers (for web apps)
   • API restrictions: Restrict to the 4 APIs above

Step 4: Configure the Plugin

Pass the API key via the googleMapKey prop to the view component, or configure it in your app's environment variables / start response.

GOOGLE_MAP_API_KEY=your_api_key_here

Development

# Install dependencies
yarn install

# Run demo
yarn dev

# Build
yarn build

# Lint
yarn lint

Test Prompts

Try these prompts to test the plugin:

1. "Show me the Eiffel Tower on the map"
2. "Where is the Sydney Opera House located?"
3. "Display Tokyo Station on the map"

License

MIT