react-native maps not loading for android (blank map)

Question

I've been stuck on this for a long time now and am starting to think perhaps react native maps cannot work on android emulator, as all the answers I find that seem to work are for IOS anyways.

I am currently using android emulator to run my app. Here is the code for a simple map...

class MainMap extends Component {
    constructor() {
    super();
  }
    render(){
        return (
            <View style={styles.container}>
            <MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
  </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,
    width:150,
    height:150,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

module.exports = MainMap;

The code seems like it should work, as I took it straight from an example. I even got my API key from google API and then added the following in my AndroidManifest.xml

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

Now, when I run react-native run-android the app seems to run fine, with no error messages. However, the app is blank. The View container loads fine, but its content MapView does not load at all. All I see is literally a blank screen.

Note that I also have Google Play services and Google API installed on my emulator too.

How can I debug this issue since I get no error messages at all? Can react-native maps even work on android emulator?

EDIT

I've been stuck on this for a long time now, and it's stalling me from being able to work on this project of mine. Because the nature of the question is difficult to debug, I am going to provide a github link to my repository in case anyone is willing to replicate the problem on their end and see what my issue is...

https://github.com/Bolboa/TTC-Mapping

All I need is for the map to load. The code looks like it should work, but the map does not load...

I am going to offer a bounty to anyone who can help me out.

try container style with `container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center', }. — lwinkyawmyat
– lwinkyawmyat, Commented Nov 29, 2016 at 7:51
@ubatin I tried this. It seems the map is simply just not loading at all... — buydadip
– buydadip, Commented Nov 30, 2016 at 3:30
did you try removing the signing on the api key in google api console?I mean the package name and SHA1 key.SOmetimes its the issue of debug key and release key.Am just asking if you considered this approach? — Arpan Sharma
– Arpan Sharma, Commented Dec 1, 2016 at 4:54
@ArpanSharma well my key is not restricted, so all I am given in Google API console is a random API key that I then included in my meta tag. So I think I am using that approach — buydadip
– buydadip, Commented Dec 1, 2016 at 5:13

Mangesh · Accepted Answer · 2016-12-01 07:39:35Z

12

+200

Give style to MapView.

Include

var { width, height } = Dimensions.get('window')

in render method

<View style={styles.container}>
        <MapView style = {styles.mapcontainer}
          showsUserLocation={true}
          showsMyLocationButton={false}
          zoomEnabled = {true}
          region={this.state.region} >
        </MapView>
</View>

Include style

container: {
    flex: 1,
  },
mapcontainer: {
    flex: 1,
    width: width,
    height: height,
  },

edited Dec 1, 2016 at 7:39

Mangesh

5,9215 gold badges51 silver badges76 bronze badges

answered Dec 1, 2016 at 6:15

Nimish Patel

5954 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nimish Patel Over a year ago

@Bolboa : have you try this solution?

buydadip Over a year ago

Sorry, I've been busy with other work, but I will try it today :)

beyondtdr · Accepted Answer · 2020-12-29 13:20:22Z

1

For some reason, regenerating an API Key and updating it in:

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

fixed it for me. Not sure how as both have the same settings.. No longer have the grey screen with Google icon!

answered Dec 29, 2020 at 13:20

beyondtdr

4611 gold badge9 silver badges21 bronze badges

Comments

Anirudha Agashe · Accepted Answer · 2016-12-01 15:09:50Z

0

You are only creating a styles variable with map style but you are not applying that style to MapView. You need to add the following line which will assign style to the MapView

style={styles.map}

so that now it looks like

<View style={styles.container}>
    <MapView
        style={styles.map}
        initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
       }}/>
</View>

also have a look at troubleshooting section you missed to include the second part.
If even after adding the style you are not able to see the map there is a problem with your key.

answered Dec 1, 2016 at 15:09

Anirudha Agashe

3,5302 gold badges34 silver badges47 bronze badges

Comments

Uladzislau Ulasenka · Accepted Answer · 2020-04-10 10:19:30Z

0

Activate "Maps SDK for Android" and "Maps SDK for iOS"

Go to the Google Cloud Platform Console. https://cloud.google.com/console/google/maps-apis/overview
Select your project with dropdown in top navigation bar.
Click on Menu and go to "APIs & Services" > "Library"
Activate "Maps SDK for Android" and "Maps SDK for iOS".
Then create new API key and add it to your project in AndroidManifest.xml inside <application> tag:

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

answered Apr 10, 2020 at 10:19

Uladzislau Ulasenka

5825 silver badges14 bronze badges

Collectives™ on Stack Overflow

react-native maps not loading for android (blank map)

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related