141 lines
3.7 KiB
Markdown
141 lines
3.7 KiB
Markdown
# 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 `<application>` tag:
|
|
|
|
```xml
|
|
<meta-data
|
|
android:name="com.google.android.geo.API_KEY"
|
|
android:value="YOUR_ANDROID_API_KEY"/>
|
|
```
|
|
|
|
### 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 `<head>` section:
|
|
|
|
```html
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_WEB_API_KEY"></script>
|
|
```
|
|
|
|
### 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)
|