# Google Maps API Setup for TAF ERP ## Getting Your API Key 1. **Create a Google Cloud Project** - Go to: https://console.cloud.google.com/ - Click "Select a project" → "New Project" - Name it (e.g., "TAF ERP Maps") and create 2. **Enable Maps JavaScript API** - Navigate to: APIs & Services → Library - Search for "Maps JavaScript API" - Click it and press "ENABLE" 3. **Create API Credentials** - Go to: APIs & Services → Credentials - Click "+ CREATE CREDENTIALS" → "API key" - Copy the generated key (looks like: `AIzaSyA...`) 4. **Secure Your Key** (IMPORTANT!) - Click on your new API key to edit - Under "Application restrictions": - Select "HTTP referrers (web sites)" - Add allowed domains: `yourdomain.com/*`, `localhost/*` - Under "API restrictions": - Select "Restrict key" - Choose only: "Maps JavaScript API" - Save ## Setting Up the Key in TAF ### Method 1: Environment Variable (.env) Edit `/home/kevin_admin/projects/TAF/.env`: ```bash GOOGLE_MAPS_API_KEY=AIzaSyA1B2C3D4E5F6G7H8I9J0K1L2M3N4O5P6Q ``` Then add this to `FrontEnd/Dashboard.html` in the `` section: ```html ``` ### Method 2: Direct JavaScript (Quick Test) Add directly to `FrontEnd/Dashboard.html` in the `` section: ```html ``` ## Alternative: Use OpenStreetMap (Free) If you don't want to deal with Google Maps billing: 1. The system will automatically fall back to Leaflet/OpenStreetMap 2. No API key needed 3. Free and open-source 4. Just leave `GOOGLE_MAPS_API_KEY` empty ## Testing the Map 1. Log into TAF 2. Go to Payroll module 3. Select an employee with clock entries 4. Click "View GPS Map" 5. You should see markers on the map ## Billing Notes - Google Maps offers $200 free credit per month - After that, it's pay-as-you-go - Map loads cost ~$7 per 1000 loads - Consider API key restrictions to prevent abuse - Monitor usage at: https://console.cloud.google.com/billing ## Troubleshooting ### Error: "Google Maps is not loaded" - Check that `window.GOOGLE_MAPS_API_KEY` is set - Check browser console for API errors - Verify API is enabled in Google Cloud Console ### Map shows grey tiles - Check domain restrictions on API key - Verify billing is enabled on Google Cloud - Check browser console for 403 errors ### Using Leaflet Fallback - System automatically uses Leaflet if Google Maps fails - No configuration needed - Works offline with cached tiles