CODEWITHSUNDEEP
androidgoogle-mapsreact-nativeandroid-emulatorreact-native-maps
Yash
Yash

Reputation: 271

Android Emulator not showing Google Maps on Screen

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 Screenshot

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>

Upvotes: 9

Views: 31020

Answers (9)

Juanma
Juanma

Reputation: 680

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.

Upvotes: 0

Nur Gazi
Nur Gazi

Reputation: 47

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

Upvotes: 0

Ehsan Shadi
Ehsan Shadi

Reputation: 687

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.

Upvotes: 1

Grant Kamin
Grant Kamin

Reputation: 1329

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.

Upvotes: 1

grey87
grey87

Reputation: 969

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
  }
});

Upvotes: 1

Kiwi Rupela
Kiwi Rupela

Reputation: 2348

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

enter image description here

Upvotes: 1

Ernest Zamelczyk
Ernest Zamelczyk

Reputation: 2819

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

Upvotes: 10

Mihail Mihov
Mihail Mihov

Reputation: 111

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!

Upvotes: 10

Ramy M. Mousa
Ramy M. Mousa

Reputation: 5933

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.

Upvotes: 0

Related Questions