I am using react-native-maps and the version is "react-native-maps": "0.27.1".

I was able to view the map on Friday, 1st October 2021.

However, today (Monday, 4th October 2021) I am getting blank map with Google logo and just the Marker for location.

I tried troubleshooting from the react-native-maps (i.e. google_maps_api.xml, PROVIDER_GOOGLE) but it didn't solve the issue.

It also mentioned it could be API KEY issue but I have been using the same API key for this project when it first worked (I also have billing enabled).

I did not make any changes to my file nor did I add anything new but the map still fails to load

I have another project with the same version "react-native-maps": "0.27.1" and it seems to be running fine and displays the map.

Here's my code snippet and other files:

MapScreen.js:

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

class DeliveryRoute extends Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: parseFloat(5.3302),
        longitude: parseFloat(103.1408),
        latitudeDelta: 0.002,
        longitudeDelta: 0.002,
      },
    };
  }

  renderMap() {
    return (
      <View style={styles.flex}>
        <MapView
          style={styles.map}
          initialRegion={this.state.region}>
          <Marker coordinate={this.state.region} pinColor="red" />
        </MapView>
      </View>
    );
  }

  render() {
    return <>{this.renderMap()}</>;
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default DeliveryRoute;

android\build.gradle:

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 21
        pileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath(".android.tools.build:gradle:4.0.0")

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
        maven { url '' }
    }
}

android\app\build.gradle:

android\app\src\main\AndroidManifest.xml:

<manifest xmlns:android="; package=".skydrivesolution.foodtigerdriver">
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <uses-permission android:name="android.permission.VIBRATE"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_SETTINGS"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="android.permission.WAKE_LOCK"/>
  <uses-permission android:name=".google.android.c2dm.permission.RECEIVE"/>
  <application android:usesCleartextTraffic="true" android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme">
    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="/@dimovdaniel/foodtiger"/>
    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="40.0.0"/>
    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
    <meta-data android:name=".google.android.geo.API_KEY" android:value="xxx"/>
    <uses-library android:name="org.apache.http.legacy" android:required="false"/>
    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:screenOrientation="portrait">
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme=".skydrivesolution.foodtigerdriver"/>
      </intent-filter>
    </activity>
    <activity android:name=".facebook.react.devsupport.DevSettingsActivity"/>
  </application>
</manifest>

Screenshot:

I am using react-native-maps and the version is "react-native-maps": "0.27.1".

I was able to view the map on Friday, 1st October 2021.

However, today (Monday, 4th October 2021) I am getting blank map with Google logo and just the Marker for location.

I tried troubleshooting from the react-native-maps (i.e. google_maps_api.xml, PROVIDER_GOOGLE) but it didn't solve the issue.

It also mentioned it could be API KEY issue but I have been using the same API key for this project when it first worked (I also have billing enabled).

I did not make any changes to my file nor did I add anything new but the map still fails to load

I have another project with the same version "react-native-maps": "0.27.1" and it seems to be running fine and displays the map.

Here's my code snippet and other files:

MapScreen.js:

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

class DeliveryRoute extends Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: parseFloat(5.3302),
        longitude: parseFloat(103.1408),
        latitudeDelta: 0.002,
        longitudeDelta: 0.002,
      },
    };
  }

  renderMap() {
    return (
      <View style={styles.flex}>
        <MapView
          style={styles.map}
          initialRegion={this.state.region}>
          <Marker coordinate={this.state.region} pinColor="red" />
        </MapView>
      </View>
    );
  }

  render() {
    return <>{this.renderMap()}</>;
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default DeliveryRoute;

android\build.gradle:

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 21
        pileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath(".android.tools.build:gradle:4.0.0")

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

android\app\build.gradle:

android\app\src\main\AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android./apk/res/android" package=".skydrivesolution.foodtigerdriver">
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <uses-permission android:name="android.permission.VIBRATE"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_SETTINGS"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="android.permission.WAKE_LOCK"/>
  <uses-permission android:name=".google.android.c2dm.permission.RECEIVE"/>
  <application android:usesCleartextTraffic="true" android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme">
    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@dimovdaniel/foodtiger"/>
    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="40.0.0"/>
    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
    <meta-data android:name=".google.android.geo.API_KEY" android:value="xxx"/>
    <uses-library android:name="org.apache.http.legacy" android:required="false"/>
    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:screenOrientation="portrait">
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme=".skydrivesolution.foodtigerdriver"/>
      </intent-filter>
    </activity>
    <activity android:name=".facebook.react.devsupport.DevSettingsActivity"/>
  </application>
</manifest>

Screenshot:

• javascript
• android
• react-native
• google-maps
• react-native-maps

5 Answers 5

Check whether you have enabled the Maps SDK for Android/ Maps SDK for IOS from the below link. Since SDK is disabled the map is not showing.

For Android:

https://console.cloud.google./apis/library/maps-android-backend.googleapis.?authuser=2&project=robotic-tract-330912&supportedpurview=project

Screenshot for reference:

For IOS:

https://console.cloud.google./apis/library/maps-ios-backend.googleapis.?authuser=2&project=robotic-tract-330912&supportedpurview=project

SOLVED

It was indeed an API issue on Google Cloud Platform

I got the same problem and figured out that I already enabled the iOS SDK, but forgot to exclude it from the API restriction.

make sure that you have linked your API key with the right SH1 https://docs.expo.dev/versions/v47.0.0/sdk/map-view/#copy-your-apps-sha-1-certificate-fingerprint

setting provider prop to DEFAULT_PROVIDER in iOS fix for me

provider={ Platform.OS === 'ios' ? PROVIDER_DEFAULT : PROVIDER_GOOGLE }