- android
- ios
- google-maps
- debugging
- mobile-development
Google Maps Beige Screen
I stumbled across this while developing a React Native app: the map showed a beige screen with the Google logo. The cause was a signing and restrictions mismatch on the Maps API key.
Get the SHA‑1 used by the failing build. For the keystore that signs that build (debug, release, or CI), run:
keytool -list -v -keystore android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android
Copy the SHA1 from "Certificate fingerprints".
Update Google Cloud Console. Open APIs & Services → Credentials, select your Maps API key, and in Android restrictions add the SHA‑1 you just copied. Keep existing entries and make sure the package name matches exactly (case‑sensitive). If you have multiple environments, repeat for each keystore (debug, release, staging, CI).
Let changes propagate and test again. Wait a few minutes, then clear the app cache or reinstall and relaunch. The map should render normally.
Why this happens: different environments use different signing keys, which produce different SHA‑1s. If the current build’s SHA‑1 isn’t on the key, Maps loads but renders beige.
That should fix it.
Affiliate Links
Using these referral links helps support my work. I only recommend products I use and fully trust. Any of the financial links do not constitute financial advice, recommendations or endorsements.