# Google Maps API Setup Guide This guide will help you configure Google Maps API keys for the Plan B Logistics app across different platforms. ## Prerequisites 1. Go to [Google Cloud Console](https://console.cloud.google.com/) 2. Create a new project or select an existing one 3. Enable the following APIs: - Maps SDK for Android - Maps SDK for iOS - Maps JavaScript API (for web) ## Get Your API Key 1. Go to [Google Cloud Console - Credentials](https://console.cloud.google.com/apis/credentials) 2. Click "Create Credentials" > "API Key" 3. Copy the API key 4. **IMPORTANT**: Restrict your API key by platform and add restrictions ## Platform-Specific Configuration ### Android 1. Open `android/app/src/main/AndroidManifest.xml` 2. Add the following inside the `` tag: ```xml ``` ### iOS 1. Open `ios/Runner/AppDelegate.swift` 2. Import GoogleMaps at the top: ```swift import GoogleMaps ``` 3. Add the following in the `application` method before `GeneratedPluginRegistrant.register(with: self)`: ```swift GMSServices.provideAPIKey("YOUR_IOS_API_KEY") ``` ### Web 1. Open `web/index.html` 2. Add the following script tag in the `` section: ```html ``` ### macOS 1. Open `macos/Runner/AppDelegate.swift` 2. Import GoogleMaps at the top: ```swift import GoogleMaps ``` 3. Add the following in the `applicationDidFinishLaunching` method: ```swift GMSServices.provideAPIKey("YOUR_MACOS_API_KEY") ``` ## API Key Restrictions (Recommended) For security, restrict your API keys by platform: ### Android API Key - Application restrictions: Android apps - Add your package name: `com.goutezplanb.planb_logistic` - Add SHA-1 certificate fingerprint ### iOS API Key - Application restrictions: iOS apps - Add your bundle identifier: `com.goutezplanb.planb-logistic` ### Web API Key - Application restrictions: HTTP referrers - Add your domain: `https://yourdomain.com/*` ### macOS API Key - Application restrictions: macOS apps (if available, otherwise use iOS restrictions) ## Security Best Practices 1. **Never commit API keys to Git**: Add them to `.gitignore` or use environment variables 2. **Use different keys per platform**: This helps track usage and limit damage if a key is compromised 3. **Set up billing alerts**: Monitor API usage to avoid unexpected costs 4. **Enable only required APIs**: Disable unused APIs to reduce attack surface ## Environment Variables (Optional) For better security, you can use environment variables or secret management: 1. Create a `.env` file (add to `.gitignore`) 2. Store API keys there 3. Use a package like `flutter_dotenv` to load them at runtime ## Testing After configuration: 1. Restart your Flutter app 2. Navigate to a delivery route 3. The map should load with markers showing delivery locations 4. If you see a blank map or errors, check: - API key is correctly configured - Required APIs are enabled in Google Cloud Console - No console errors in DevTools ## Troubleshooting ### Map shows but is gray - Check if the API key is valid - Verify billing is enabled on your Google Cloud project ### "This page can't load Google Maps correctly" - API key restrictions might be too strict - Check the browser console for specific error messages ### Markers don't appear - Verify delivery addresses have valid latitude/longitude - Check browser/app console for JavaScript errors ## Cost Management Google Maps offers a generous free tier: - $200 free credit per month - Approximately 28,000 map loads per month free Monitor your usage at: [Google Cloud Console - Billing](https://console.cloud.google.com/billing)