Step 4 · Mobile Apps

Google Maps Key in the Apps

The phone apps need your Google Maps key inside the build to draw the native map. The same key also goes into the admin panel for address search, routes and the websites.

15 min

The apps can show Google Maps or free OpenStreetMap. You choose in the admin panel under SettingsMap Settings (Type: Google Map or OSM Map). Whatever you choose, the demo key in the apps must be replaced with your own before you publish: it belongs to the Go4Food demo project and will stop working for you.

Where the key goes	Used for
`AndroidManifest.xml` in each app	Drawing the Google map on Android
`AppDelegate.swift` in each app	Drawing the Google map on iPhone
Admin panel → Map Settings → Google Map Key	Address search, street address of a pin, the route on the tracking map, and every map on the admin panel and the websites

1. Create the key#

In the Google Cloud Console, select your Firebase project, open APIs & Services → Library and enable:

API	Used by	For
Maps SDK for Android	Customer, Restaurant, Driver	The map in the Android apps
Maps SDK for iOS	Customer, Restaurant, Driver	The map in the iPhone apps
Maps JavaScript API	Admin panel, restaurant panel, customer website	The map on the web
Places API	Customer and Restaurant apps, admin panel, websites	Address and place search
Geocoding API	Customer and Driver apps	The street address of a map pin
Routes API	Customer and Driver apps	The road route on the tracking map

Then APIs & Services → Credentials → Create credentials → API key, and copy the key (it starts with AIza).

Billing

Google Maps needs a billing account on the Google Cloud project. Your Firebase project is already on the Blaze plan, so it has one. Google gives a monthly free allowance per API.

2. Put it in each app#

AndroidiOS

Open android/app/src/main/AndroidManifest.xml and replace the value of the com.google.android.geo.API_KEY line inside <application>:

customer/android/app/src/main/AndroidManifest.xml

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY" />

Open ios/Runner/AppDelegate.swift and replace the key in the GMSServices.provideAPIKey line:

customer/ios/Runner/AppDelegate.swift

import GoogleMaps
...
GMSServices.provideAPIKey("YOUR_API_KEY")

Do it in customer, restaurant and driver. The line is already there in all six files; you only change the value.

3. Rebuild#

The key is read only when the app is built. Hot reload is not enough: stop the app and run it again, or build a new APK, AAB or IPA.

4. Save it in the admin panel#

Open SettingsMap Settings, paste the key into Google Map Key, pick the Type and click Save. The apps and websites read it at start-up. See Zones & map settings.

Websites need no file change

The admin panel, restaurant panel and customer website load the Google Maps script with the key from Map Settings. You do not put the key into any web/index.html.

Protect your key

Under API restrictions, restrict the key to the six APIs above, and set a budget alert in Google Cloud Billing. Do not add an Android-app, iOS-app or website restriction to the key you save in the admin panel: the apps call Places, Geocoding and Routes with it directly, and the websites use it too. If you want app restrictions, create a second key just for the two app files above.

Problem	Fix
Grey map with a Google logo	Maps SDK for Android / iOS is not enabled, or the key in the app file is wrong. Rebuild after fixing.
Address search finds nothing	Places API is not enabled, or the key in Map Settings is empty or restricted.
No route line on the tracking map	Routes API is not enabled.
"This page can't load Google Maps correctly" on a website	Maps JavaScript API is not enabled, billing is off, or the key has a website restriction that does not include your domain.