Installation

Prerequisites

Before installing Route Optimization Map, ensure you have:

• Node.js 18.0 or higher
• npm, pnpm, or yarn package manager
• A Google Maps API key (Get one here)

Package Selection

Choose the package(s) that match your tech stack:

Package	Use When	Dependencies
@route-optimization/react	Building with React	Requires react, react-dom
@route-optimization/vue	Building with Vue 3	Requires vue 3.3+
@route-optimization/vanilla	Vanilla JS or other frameworks	No framework dependencies
@route-optimization/core	Using with unlisted framework	No framework dependencies
@route-optimization/converter	Converting DirectionsResult	No dependencies

Installation Commands

React

npm

npm install @route-optimization/react @route-optimization/core

pnpm

pnpm add @route-optimization/react @route-optimization/core

yarn

yarn add @route-optimization/react @route-optimization/core

Vue 3

npm

npm install @route-optimization/vue @route-optimization/core

pnpm

pnpm add @route-optimization/vue @route-optimization/core

yarn

yarn add @route-optimization/vue @route-optimization/core

Vanilla JavaScript

npm

npm install @route-optimization/vanilla

pnpm

pnpm add @route-optimization/vanilla

yarn

yarn add @route-optimization/vanilla

Converter Only

npm

npm install @route-optimization/converter @route-optimization/core

pnpm

pnpm add @route-optimization/converter @route-optimization/core

yarn

yarn add @route-optimization/converter @route-optimization/core

TypeScript Configuration

If using TypeScript, ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"],
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Google Maps API Key

Get an API Key

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable Maps JavaScript API
4. Create credentials → API key
5. (Optional) Restrict the key to your domain

Configure Environment Variables

React (.env)

REACT_APP_GOOGLE_MAPS_API_KEY=your_api_key_here

Vue (.env)

VITE_GOOGLE_MAPS_API_KEY=your_api_key_here

Next.js (.env.local)

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_here

Use in Code

React

<RouteMapView apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY!} route={route} />

Vue

<RouteMapView :api-key="import.meta.env.VITE_GOOGLE_MAPS_API_KEY" :route="route" />

Vanilla

const routeMap = new RouteMap({
  apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
  container: 'map',
});

Verify Installation

Create a simple test to verify everything works:

import { RouteMapView } from '@route-optimization/react';
// or
import { RouteMapView } from '@route-optimization/vue';
// or
import { RouteMap } from '@route-optimization/vanilla';

console.log('✅ Package imported successfully!');

Common Issues

Module Not Found

If you see "Module not found" errors:

1. Clear cache: rm -rf node_modules package-lock.json && npm install
2. Check versions: Ensure peer dependencies are installed
3. Restart dev server

TypeScript Errors

If TypeScript doesn't recognize types:

1. Check tsconfig.json: Ensure proper moduleResolution
2. Restart TypeScript server: In VS Code, Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server"
3. Install type definitions: npm install -D @types/google.maps

Google Maps Not Loading

If the map doesn't display:

1. Check API key: Verify it's correct and enabled
2. Check console: Look for error messages
3. Verify billing: Ensure Google Cloud billing is enabled
4. Check restrictions: Review API key restrictions

Next Steps

• Quick Start Guide
• Core Concepts
• API Reference
• Examples