Android Emulator not showing Google Maps on Screen

Question

I have been trying to follow this https://github.com/airbnb/react-native-maps tutorial I tried everything they said but getting a blank screen on my emulator of android studio.

My Code:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import MapView from 'react-native-maps';

export default class ReactNativeMaps extends Component {
  render() {
   const { region } = this.props;
   console.log(region);

   return (
     <View style ={styles.container}>
       <MapView
         style={styles.map}
         region={{
           latitude: 39.1329,
           longitude: 84.5150,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
       >
       </MapView>
     </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,
  },
});

AppRegistry.registerComponent('ReactNativeMaps', () => ReactNativeMaps);

AndroidManifest.xml File:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.reactnativemaps"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="AIzaSyC3injbScdjmMp7J5MM1GqBhSb-kulIF_8"/>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Pul

Answer 1

I had similar problem and spent a lot of time before solve it. Usually all was OK on real device, but fails to show Google Map on some of my emulator variants. Obviously, the program code was OK, so the question was why?

What I have observed so far:

1. If hardware acceleration is disabled - all is back working.

2. If use pure android image, cpu-arm (not accelerated x86, it was slower), but also works.

3. If you are under x86_64 OS - macOS 10.13.2 in my case, USE x86_64 version of emulator image, instead of universal x86!!! That was my major mistake to do not get it works! Replacing my emulator's image with x86_64 variants, solve all of them!

Inchoate

Answer 2

• Go to AVD
• Choose your device
• Go into settings
• Emulated Performance -> Graphics - set to Hardware - GLES 2.0

Motive

"Go into settings" This is where it stops for me: no such option available unless you mean the internal device settings but that is not clear in this post – Descartes

Answer 3

If you use emulator of real device (like Genymotion), please make sure you have installed Google Play support.

Check Internet (GPS/Wifi/Data) is enabled on your device.

And don't forget add width and height to styles of map.

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,
    width:200,
    height:200
  }
});

Ichor

Answer 4

I also had the same issue for the same target-version and i resolve this issue by changing the google-api key.Regenerate the google api-key using the link

https://developers.google.com/maps/documentation/android-api/signup#release-cert

and add it in AndroidManifest.xml File as you added

Boyett

Answer 5

Try updating Google Maps through the emulator's play store. A newly created emulator will have an outdated version of Google Maps.

And if you can't update Maps, try updating Google Play services.

Stipendiary

Answer 6

For the blank screen using the maps there are usually 2 main reasons:

• When you are using the wrong Google Api Key. (If you import the web api key it shall work, try it). and make sure you enabled the maps service.
• Android Emulator mainly is too poor working with maps and google services. I never had my emulator running maps. So try an actual device.

Footway

The example that I followed asked me to use browser key for the maps to work on it. Which I assume is the HTTP API key in Goggle API console Credentials. Is it Different from Web API key or are they the same. Also I don't have a physical device so emulator is the only option for me. – Pul

@Pul Try keeping the Restriction to None. For the emulator issue, as I said, I never got maps running on the emulator. try searching for ways to get it working. – Footway

Answer 7

I had the same issue. In my case, The API key was correct. It was just because my emulator Wifi did not connected properly. If you have the same problem with wifi connectivity, this answer might also help you.

Hosbein

Answer 8

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Clabel:C%7C40.718217,-73.998284 &key=YOUR_API_KEY

Check your api key using this static map

Grados

Answer 9

Find the line android:name="com.google.android.geo.API_KEY" and instead, try using android:name="com.google.android.maps.v2.API_KEY" in your AndroidManifest.xml file. I did this and worked for me.

Steel