Plan-B/ionic-planb-logistic-app-flutter
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
ionic-planb-logistic-app-fl.../GOOGLE_MAPS_SETUP.md

3.7 KiB
Raw Permalink Blame History

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
  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
  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:
<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:
import GoogleMaps
  1. Add the following in the application method before GeneratedPluginRegistrant.register(with: self):
GMSServices.provideAPIKey("YOUR_IOS_API_KEY")

Web

  1. Open web/index.html
  2. Add the following script tag in the <head> section:
<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:
import GoogleMaps
  1. Add the following in the applicationDidFinishLaunching method:
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