React-native-maps: Blank Maps on Android

[Starl0rd77]

Hello all,

I'm trying to make a simple app with a google maps, but I've a blank maps.
My api_key is set, and I can see the requests on console API.
this is my javascript file:

import React, { Component } from 'react';
import { StyleSheet, View, Button, Dimensions, ScrollView } from 'react-native';
import MapView from 'react-native-maps';

export default class Home extends React.Component {

   static navigationOptions = {
     header: null
   };

  render() {
    return (
      <MapView
        style={ styles.map }
        showsUserLocation={true}
        showsMyLocationButton={false}
        zoomEnabled = {true}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

Can you help me ?
Thanks

[alvelig]

IOS or Android?
Did you try https://github.com/alvelig/react-native-maps-example?
Is it white or grey? Does it have red border?
Did you follow: https://github.com/react-community/react-native-maps#troubleshooting?

[alvelig]

@rborn that's why we need the template LOL
For me the most important thing is that people clone an example repo and reproduce their problems.

[rborn]

@alvelig on it!

[Starl0rd77]

@alvelig android,
I will test the example.

[Starl0rd77]

@alvelig

Is it white or grey? it's grey
Does it have red border? I don't have border
Did you follow: https://github.com/react-community/react-native-maps#troubleshooting? Yes

[rborn]

@Starl0rd77 that's a key issue, have a look in google console if your key is restricted in any way (ip, app id, etc)

[Starl0rd77]

@rborn
My key isn't restricted in any way.

[rborn]

@Starl0rd77
maybe try this (might be stupid)

• be sure the api key is set correctly in androidmanifest file
• rebuild the app if you changed the api key at a later stage
• try this style for the map

    map: {
        flex: 1,
        ...StyleSheet.absoluteFillObject
    },

[Starl0rd77]

@rborn

My api key is correctly set, I've rebuild the app again, and I try the style, but no change. It still doesn't work.

[rborn]

@Starl0rd77 I "stole" your key and tested in a project of mine and it works.
Does the emulator have google-play services installed? ( I tested with Genymotion ).

Try to get some logs form the emulator: adb logcat in a terminal should show a lot of garbage but you should find the issue there

[Starl0rd77]

@rborn

I've some logs in th terminal:

ConfigurationChimeraPro: Caller is not authorized to access Uri: content://com.google.android.gms.phenotype/com.google.android.gms.clearcut.public


                                                          [ 12-13 14:46:35.938  3497: 3497 D/         ]
                                                          HostConnection::get() New Host Connection established 0xde8d7880, tid 3497

Google Maps Android API: Google Play services package version: 11743480

                                                          [ 12-13 14:46:36.342  3497: 3771 D/         ]
                                                          HostConnection::get() New Host Connection established 0xea33d800, tid 3771

I will try with genymotion.

[plrdev]

Also receiving this now, had this working before, but just today noticed the map is empty on Android. iOS seems fine.

[rborn]

@eduplus on a device or Genymotion with google play installed? The normal emulators have sometimes problems with the google services.

[plrdev]

Android emulator (Pixel 2 with play store + google services). Never had a problem with the same setup before. Been using the maps for about a year with the same setup and just now experienced this.

[rborn]

@eduplus Can you make a small demo project to reproduce the issue?

[cristian-milea]

i have the same issue since yesterday... haven't found a solution yet. any luck with you guys?

[alvelig]

@frozenxis, @eduplus since yesterday the key that was working before is not working? Seems like a Google temporary problem. What flips me out, that the same keys are working in @rborn's environment. Do you mind cloning https://github.com/alvelig/react-native-maps-example and trying from scratch?

[maitham]

I have the exact same problem too. Could it be due to the latest update to the repo?

[alvelig]

No, it's not due to the update.

I just cloned my own example project https://github.com/alvelig/react-native-maps-example, ran npm i, CREATED A NEW KEY pasted it to the API_KEY in AndroidManifest and it worked.

[alvelig]

Please, follow my instructions to find a way to localize your problem, as we can not reproduce this in our environments.

Also provide logs from logcat please.

[maitham]

I've cloned your repo, the only error that sticks out is any idea how to fix this? :

12-13 16:29:56.845 3902-3902/? E/Google Maps Android API: Google Maps Android API v2 only supports devices with OpenGL ES 2.0 and above

12-13 16:35:32.132 1456-2926/? E/AudioFlinger: not enough memory for AudioTrack size=131296
12-13 16:35:32.132 1456-2926/? E/AudioFlinger: createRecordTrack_l() initCheck failed -12; no control block?
12-13 16:35:32.145 2083-4179/? E/AudioRecord: AudioFlinger could not create record track, status: -12
12-13 16:35:32.156 2083-4179/? E/AudioRecord-JNI: Error creating AudioRecord instance: initialization check failed with status -12.
12-13 16:35:32.156 2083-4179/? E/android.media.AudioRecord: Error code -20 when initializing native AudioRecord object.
12-13 16:35:32.158 2083-4179/? E/ActivityThread: Failed to find provider info for com.google.android.apps.gsa.testing.ui.audio.recorded
12-13 16:35:32.273 1459-1580/? E/installd: Failed to delete /data/app/vmdl575259406.tmp: No such file or directory
12-13 16:35:32.300 2083-2097/? E/ReloadingLock: Finalizing LOCKED Token[shortcuts 2017-12-13 16:35:32.130]
12-13 16:35:32.949 2003-3178/? E/NetworkScheduler: Unrecognised action provided: android.intent.action.PACKAGE_REMOVED
12-13 16:35:33.408 2399-2399/? E/Finsky: [2] com.google.android.finsky.wear.bl.a(3): onConnectionFailed: ConnectionResult{statusCode=API_UNAVAILABLE, resolution=null, message=null}
12-13 16:35:33.470 2003-4272/? E/NetworkScheduler: Unrecognised action provided: android.intent.action.PACKAGE_REPLACED
12-13 16:35:33.721 2003-4274/? E/ctxmgr: [ProducerStatusImpl]updateStateForNewContextData: inactive, contextName=7
12-13 16:35:37.250 1456-1506/? E/AudioFlinger: not enough memory for AudioTrack size=131296
12-13 16:35:37.250 1456-1506/? E/AudioFlinger: createRecordTrack_l() initCheck failed -12; no control block?
12-13 16:35:37.250 2083-4179/? E/AudioRecord: AudioFlinger could not create record track, status: -12
12-13 16:35:37.253 2083-4179/? E/AudioRecord-JNI: Error creating AudioRecord instance: initialization check failed with status -12.
12-13 16:35:37.253 2083-4179/? E/android.media.AudioRecord: Error code -20 when initializing native AudioRecord object.
12-13 16:35:37.253 2083-4179/? E/ActivityThread: Failed to find provider info for com.google.android.apps.gsa.testing.ui.audio.recorded
12-13 16:35:41.651 1536-1549/? E/memtrack: Couldn't load memtrack module
12-13 16:35:41.653 1536-1553/? E/BatteryExternalStatsWorker: modem info is invalid: ModemActivityInfo{ mTimestamp=0 mSleepTimeMs=0 mIdleTimeMs=0 mTxTimeMs[]=[0, 0, 0, 0, 0] mRxTimeMs=0 mEnergyUsed=0}
12-13 16:35:41.870 1639-1663/? E/ResourcesManager: failed to add asset path /data/app/com.reactnativemapsexample-kV4oD-iXNORNWKhXzhA7MQ==/base.apk
12-13 16:35:41.870 1639-1663/? E/ResourcesManager: failed to add asset path /data/app/com.reactnativemapsexample-kV4oD-iXNORNWKhXzhA7MQ==/base.apk
12-13 16:35:41.870 1639-1663/? E/ResourcesManager: failed to add asset path /data/app/com.reactnativemapsexample-kV4oD-iXNORNWKhXzhA7MQ==/base.apk
12-13 16:35:41.870 1639-1663/? E/ResourcesManager: failed to add asset path /data/app/com.reactnativemapsexample-kV4oD-iXNORNWKhXzhA7MQ==/base.apk
12-13 16:35:41.871 1639-1663/? E/ResourcesManager: failed to add asset path /data/app/com.reactnativemapsexample-kV4oD-iXNORNWKhXzhA7MQ==/base.apk
12-13 16:35:42.616 1394-1410/? E/SurfaceFlinger: ro.sf.lcd_density must be defined as a build property
12-13 16:35:42.994 1394-1463/? E/SurfaceFlinger: ro.sf.lcd_density must be defined as a build property
12-13 16:35:45.853 4582-4582/? E/Google Maps Android API: Google Maps Android API v2 only supports devices with OpenGL ES 2.0 and above
12-13 16:35:53.272 1536-1549/? E/memtrack: Couldn't load memtrack module
12-13 16:36:03.586 1536-1549/? E/memtrack: Couldn't load memtrack module
12-13 16:36:03.596 1536-1549/? E/memtrack: Couldn't load memtrack module

[jfreak]

@maitham1 had same issues with the api key.
Paste the meta data tag right before the closing of application tag and ./gradlew clean and then run it.

[maitham]

@jfreak Ive tried this still no difference unfortunately!

[rborn]

@maitham1 your problem is this:

12-13 16:29:56.845 3902-3902/? E/Google Maps Android API: Google Maps Android API v2 only supports devices with OpenGL ES 2.0 and above

Please try to install the app on a Genymotion emulator (there is a free version) or a device with a more recent version of android. (I suggest not to support anything below 4.4.4, and 4.4.4 only of you really need to go under 5)

[efkan]

I get stuck on blank map too.
In fact there is no any issue on API 23 (Marshmallow).
However when trying on API 27 (Oreo) the map doesn't appear.

_I wonder that is there any one who has encountered with this issue?_
_And is there any chance to overcome this issue?_

Environment

| Name | Version|
|----------|-----------|
| react-native-maps | 0.19.0|
|react-native|0.50.3|

[maitham]

@rborn @jfreak @alvelig Thanks for the help! I've got examples and my own project to work in Genymotion using API 23 and API 25 . However It simply won't load in API 27. Have you tested it in API 27 ?

[jfreak]

@maitham1 No

[rborn]

@maitham1 I'll try to test but I need to install gapps on a genymotion because I don't have any device with android oreo. Can you provide some logs from adb logcat, I suspect some permission issues.
thnx

[michelalbers]

Got the same issue - API Level 27 will show grey map, works in Genymotion Android 6.0.0 (Level 23) with OpenGApps installed.

[rborn]

@Starl0rd77 @maitham1 @efkan if you are on emulator, please try to enable the use host gpu setting on it (requires restart)

[efkan]

@rborn I use Android Emulator and I tried to run emulator with both of Automatic and Hardware - GLES 2.0. Unfortunately, still gray map is shown.

[alvelig]

See this comment https://github.com/react-community/react-native-maps/issues/118#issuecomment-353250412

[anandbabud1987]

Have found the root cause, your AVD API level should be 24 or 25. what I used was API 27.
Target should be Google Play API instead of Google API.
One more thing, I regenerated android API key and enabled javascript api as well.
But it did not work on my pixel 2 emulator which dont have a google play service.
I have chosen a different emulator with a lower API 25 and with target Google Play API and it worked like charm.

[alvelig]

@Starl0rd77 did you manage to solve your issue?

[rborn]

@Starl0rd77 @maitham1 @efkan @alvelig just tested on a real device with android 8.1.0 on it and it works ok 🎉

[efkan]

@rborn thanx for sharing your test result.

So, we are sure the maps appears in real devices. Aren't we?
(I don't have a chance to test on a real device for now)

Some logcat rows regarding react-native-maps are below:

12-22 19:01:38.198  7433  7454 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.AirMapCalloutManager
12-22 19:01:38.200  7433  7454 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.AirMapMarkerManager
12-22 19:01:38.202  7433  7444 I zygote  : Background concurrent copying GC freed 15289(3MB) AllocSpace objects, 6(128KB) LOS objects, 49% free, 3MB/7MB, paused 215us total 291.302ms
12-22 19:01:38.213  7433  7454 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.AirMapPolylineManager
12-22 19:01:38.217  7433  7454 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.AirMapPolygonManager
12-22 19:01:38.233  7433  7454 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.AirMapCircleManager
12-22 19:01:38.236  7433  7454 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.AirMapManager
12-22 19:01:38.258  7433  7454 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.AirMapLiteManager
12-22 19:01:38.267  7433  7454 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.AirMapUrlTileManager
12-22 19:01:38.280  7433  7454 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.AirMapLocalTileManager
12-22 19:01:40.063  7433  7467 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.airbnb.android.react.maps.SizeReportingShadowNode

[rborn]

@efkan in the previous message I attached a photo of the device in split mode - up: a RN app with the map, down: the settings app with the os version information

[stevemu]

I had the blank screen problem too. What I did to solve it is going back Google API console and make sure to enable the project with Google Map API. I didn't remember correctly, but something like that.

[rborn]

@alvelig I think we can close this one, what do you think?

[alvelig]

I agree.

On Dec 29, 2017, at 08:21, Dan Tamas [e-mail] wrote:

@alvelig I think we can close this one, what do you think?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[alvelig]

Check your key here: https://jsfiddle.net/user2314737/7cfpxpf7/
Or any web google maps project with key.

[macs03]

Just update your Map API_KEY and it'll work

[Avery246813579]

I fixed this by enabling "Google Maps Android API" inside the Google API console.

[michaelkowalski]

@Avery246813579 wow, this actually works!! The entire thread should be reduced to this solution 👍

[MarkOSullivan94]

@Starl0rd77 try zooming out of the map, I thought RN Maps wasn't working for me when I had a grey Google Maps screen appearing for me, when I zoomed out a lot, eventually I seen the map.

[anj-oo]

I have spent hours to run in android device and my issue was I didn't add permission for location in android manifest

[suprabhasupi]

Thanks @Avery246813579. It worked for me. Now it has been updated from "Google Maps Android API" to "Maps SDK for Android".

[nwaughachukwuma]

Am not sure if it's appropriate, but using the legacy meta-data name worked for me:

<meta-data
      android:name="com.google.android.maps.v2.API_KEY"
      android:value="API_KEY_HERE"/>

Against using
android:name="com.google.android.geo.API_KEY"

[sathishu37]

I fixed this by enabling "Google Maps Android API" inside the Google API console.

OMG... Saved my day... love it.

[NikoMontana]

In my case I was able to see the map in debug version but after releasing my Android version to the store I also had a blank screen instead of the map.

The problem is that I let google manage the app signature for release builds. That means google is storing the certificates in the cloud for you.

Now if you have restricted your API Keys (in the google cloud console) with packagename and SHA-1 fingerprint you will have to add a second fingerprint to your restriction which differs from your local development fingerprint.
Log into your google developer console under Release Management > App Signature and copy the SHA-1 fingerprint from the upload certificate.

Cheers

[sezginriggs]

For IOS, If you have included both GoogleMaps.framework and GoogleMapsM4B.framework (Maps for Business) in your XCode project, remove GoogleMapsM4B.framework.

Otherwise you'll need to enable Google Maps Mobile SDK for Work through Enterprise Support portal instead of Google Maps SDK for iOS from Cloud Console.

I think, this should be added to install/troubleshoot notes.

[gghnisan]

Add mapType = 'standard', but not 'none'. It's work for me with google maps

[prjmax]

I've tried everything, still having the same problem... so frustrating.

[gghnisan]

I've tried everything, still having the same problem... so frustrating.

Try to specify a specific version of the library. For example 0.22.1 or other.
I am using version 0.22.1 and "react-native": "0.57.8"
"react-native-maps": "0.22.1"

do not use * : "react-native-maps": "*"

[ajayrawat12]

In My case, i didnt added stlye in main View Component, and MAPVIEW was rendering outside main app view, Also, Added text in MapView just to test is it rendering any text ?, when it rendered text, it displayed map in very small line, So i got to know after that its a style issue. So added style to my View, styles.container:

<View style={styles.container}>
        <MapView 
            style={styles.map} 
            initialRegion={{
               latitude:this.state.latitude,
               longitude:this.state.longitude,
               latitudeDelta: 1,
               longitudeDelta: 1,
        }}>

    </MapView>

    <Text>{this.state.latitude, this.state.longitude}</Text>

</View>

const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});

[josemvcerqueira]

Am not sure if it's appropriate, but using the legacy meta-data name worked for me:

<meta-data
      android:name="com.google.android.maps.v2.API_KEY"
      android:value="API_KEY_HERE"/>

Against using
android:name="com.google.android.geo.API_KEY"

this solution worked for me! Thank you.

[chellongCoder]

@alvelig

Is it white or grey? it's grey
Does it have red border? I don't have border
Did you follow: https://github.com/react-community/react-native-maps#troubleshooting? Yes

Hello. I resolved your issue by create new AVD with google play service.

You can see the icon play store in AVD Nexus 5 API 28, which help to fix the blank gg map

[vammu920]

hey i got the solution
just remove all the restrictions and regenerate a new key and use it and build again and it works

[Ismoilov]

same issue any solutions

[vammu920]

@Ismoilov go and enable google maps maps api in google cloud console. and try it

[Ismoilov]

@Ismoilov go and enable google maps maps api in google cloud console. and try it
still dont work

[richardbumm]

The only time I see this problem is the API key is incorrect or expired. The 10 times this same problem gets posted per month, that's the solution.

[malviyalokesh1]

you have to separately Enable Maps SDK for Android or IOS in your google cloud platform console.

[eldano1995]

To those with the map GRAY or BLANK:

### Please remember to enable GoogleServicesFramework in your phone
That was the problem for me, because I disabled to avoid spending that much mobile data

[Timon0305]

fuck, all are not working.

[Timon0305]

This is not my project.
But if you have issue I will fix that
Your problem is api key problem..
Thanks,

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

From: [e-mail]
Sent: 23 November 2020 13:06
To: react-native-maps/[e-mail]
Cc: [e-mail]; [e-mail]
Subject: Re: [react-native-maps/react-native-maps] Blank Maps on Android (#1877)

Your Google map API KEY is correct?
I think that you need to check your api_key again.
Please test your api key in https://jsfiddle.net/user2314737/7cfpxpf7/
If your API key is not correct you can see this error:
["Google Maps JavaScript API error: InvalidKeyMapError
https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error"]

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/react-native-maps/react-native-maps/issues/1877#issuecomment-731928438, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOFUW7G4VVQ63SS3OSRSC53SRHUVPANCNFSM4EICHHTA.

[Daniel-Simoes]

I have a different problem, the map is rendering well on an emulated device, but it doesn't work on another emulated device by Android Studio.