React-native-maps Blank page Only google logo

Question

I've been trying to install google maps for react-native for a week an still no success. I've searched and tried the solutions in the react-native-maps github issue but still I get a blank page.

What I do:

react-native init myapp
npm install
yarn add react-native-maps
react-native link react-native-maps

In Google Console APIs -> Create new Project -> Enable Google Maps Android API, Google Maps JavaScript API and Places API -> Create credentials

In AndroidManifest.xml

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

package.json

    {
    "name": "maps",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0",
        "react-native": "0.50.4",
        "react-native-maps": "^0.18.3"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0"
    },
    "jest": {
        "preset": "react-native"
    }
}

App.js

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <MapView
        style={styles.map}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}
      >
      </MapView>  
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

Edit: Because some people asked me for stack trace: Sample 1

Septet

did u just leak your GOOGLE MAP API KEY ? – Vacuity

bro you google map api key still valid if u read this notification please edit the question :< – Vacuity

Answer 1

Can you provide some stack traces so that we can have a better insight on your problem? Your problem description sounds like your phone is not connected to the internet and this is why map is not rendered.

Regardless, here's some tips to get react-native-maps running based on my past experiences.

• First and foremost, always configure your Android app according to the official documentation here.
• Make sure a Google Maps API key is generated through the console.
• Check whether your react-native-maps is compatible with your react-native version.
• Check your android build-tools version.
• If you are using the android emulator from Genymotion (older version), make sure you include Google Play Services, otherwise Map will not work.
• Active internet connection. Make sure your phone or emulator is connected for the Map to load (iOS is good without internet access).
• Always inject a latlong object to the initialRegion prop so that the map knows where to focus on.

Motherhood

I am using react-native-maps in my app. I have the same issue of not showing the map, only shows google logo, checked @Rex Low mentioned tips, but still the map works only on ios app, not in the android. any possible reasons? – Memling

@DinukaSalwathura Lots have happened over the past few months. For Android, now we have to individually specify the google component versions in order for things to work. Here's some tips you might wanna check up on: android-developers.googleblog.com/2018/05/… – Motherhood

I updated my play-services to 15.0.0 in build.gradle, but still map doesnt come. You have any other solutions? this would be a great help! Thank you. – Memling

My app worked :D in the androidManifest.xml there was two spaces before and after the api key. when the spaces removed map worked! Thank you. – Memling

Had same issue on my Android tablet (USB debugging), while it was working in my Android emulator. Read this answer - and as it turned out, I had forgot to activate Wifi in my tablet. – Replace

- Always inject a latlong object to the initialRegion prop so that the map knows where to focus on. this is work – Diverticulitis

Answer 2

I spent a whole day on trying solutions provided in google, but it seemed that legacy meta-data wasn't working for me, so I changed the line below in AndroidManifest.xml

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="Your Google maps API Key Here"/>

to

<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="Your Google maps API Key Here"/>

and finally the map showed up.

Of course the Maps SDK for Android must be enabled in Google Api Console. Here are the steps to enable Maps SDK for Android for beginners:

1. Go to the Google Api Console.

2. on the top-left of the screen, just on the right side of Google Apis logo, you see your project name, select the right project name and then, below the project name, you see a blue text + ENABLE APIS AND SERVICES. Click on it.

3. in the webpage that opens, scroll down to find Maps SDK for Android. Click to enable it.

Nainsook

It works well. Changing geo to maps.v2 was the trick for me. – Adytum

Same for me, thanks for saving the day – Cohberg

Google Dev "...For backwards compatibility, the API also supports the name com.google.android.maps.v2.API_KEY. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception." – Caseous

Answer 3

An advice to friends who has that blank map view with Google logo. I spent all my day to solve that problem. Finally I recognized that, the map was actually working but fully zoomed when first run. I thought it was blank page, but actually it was blank territory :) FYI

Erick

how to set the initial zoom level .?? – Audacity

Answer 4

Make sure you enable the API Key in Google Console to work with Maps SDK for Android and if you want for iOS enable Maps SDK for iOS

Draghound

Answer 5

Work for me. probably it work for you too.

1) Remove the containerStyle and View. Use the below Code

 mapStyle: {
    height: 400,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },

2) mapView code replace with

<MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={mapStyle}
      zoomEnabled={true}
      region={{
        latitude: 22.258,
        longitude: 71.19,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      <Marker
        coordinate={{ latitude: 22.258, longitude: 71.19 }}
        title={"title"}
        description={"test"}
      icon={image}
      />
    </MapView>

Brigand

Answer 6

In most cases it is related to two issues:

1. API key is not correct
2. The corresponding API is not enabled in Google developer console

I followed this article to create API key and to enable apis. And it worked all of sudden. Before it used to show only Google logo like you said.

Batha

Answer 7

after a week of searching and looking around i solved this issue by generating the SHA1 fingerprints from the android project directory

keytool -list -v -keystore /Users/username/ProjecFolder/android/app/debug.keystore  -alias androiddebugkey -storepass android -keypass android

instead of

keytool -list -v -keystore ~/.android/debug.keystore  -alias androiddebugkey -storepass android -keypass android

Vinculum

Answer 8

I have struggled with react native maps both Android and iOS platforms.

On Android there was Google API version. I tried to use Google API 27 did not work, but API 26 was okey.

That tip i found at: https://github.com/react-community/react-native-maps/issues/1877#issuecomment-353261669

On iOS was package versions: As i created app with CRNA, that installed [email protected] and that was not compatible with [email protected] So i changed react-native to version 0.53.0 and that solved problem of crashing app at build time with error: Entry, ":CFBundleIdentifier”, Does Not Exist".

Liris

Answer 9

I have faced the same issue.Finally,i got it after setting minsdkVersion to 18 which was 19 before. that worked me.

Gothard

Answer 10

It took me days to figure this out. In my case (Expo project) it was missing SHA-1 certificate fingerprint, the one from Play Console. I had only the Expo one there.

TL;DR

According to deploying to play store part of the documentation, I had to add another SHA-1 certificate fingerprint. Not only the one from expo fetch:android:hashes command output, but also the one from Google Play Console -> Your App -> Release management -> App signing.

So now I have two records in my: GCP Credentials -> my Maps SDK for Android API key -> Restrict usage to your Android apps section, both with my apps Package name.

Expression

Answer 11

I have been trying all the possible solutions, in my case the application is in Expo, and the problem is in the configuration of the API KEY.

Solution

In the API Key configuration in Google Play Console, include two constraints:

one containing the firgerprint generated with expo fetch: android: hashes

and the other containing the firgerprint generated with the keytool -list -v -keystore "% USERPROFILE% \. Android \ debug.keystore "-alias androiddebugkey -storepass android -keypass android

It is important that both restrictions have the same package name

Rundle

Answer 12

I got the same issue. But I could not find the correct solution anywhere.

I faced this issue after ejecting form expo.

My problem was related to map key. I found that clearly in log of android studio. Then I remove all restrictions from Google's credential manage. (Set Application restrictions to none)

If you see can see the map at this point, 50% is done.

In my case it was the problem with "package name and SHA-1 signing-certificate" I have run the default one, which is

"keytool -list -v -keystore "%USERPROFILE%.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android"

the result i got for some other project ( I think) Then I went to my app folder in project directory (project root\android\app) , there I saw "debug.keystore" file. Then i ran this

keytool -list -v -keystore "debug.keystore" -alias androiddebugkey -storepass android -keypass android

I got different result. I apply it for restrictions , It worked for me.

I think this may help to some one.

Marnie

Answer 13

Go to your

1. Google Console Developer Account
2. Select Your Respective Project

Android

3. Enable Maps SDK for Android

iOS

3. Enable Maps SDK for iOS

Affix

Answer 14

After a couple of research, found out this code worked me. The difference, I noticed, was in creating a useRef() object and adding it as a dependency. I also, changed initialRegion to region:

import React, {useState, useEffect, useRef} from 'react';
import {StyleSheet, Text} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';

import Geolocation from 'react-native-geolocation-service';

const GeoScreen = () => {
  const [newPosition, setNewPosition] = useState({
    latitude: 37.12,
    longitude: -122.1,
    latitudeDelta: 0.0421,
    longitudeDelta: 0.0421,
  });
  const mapRef = useRef();

  useEffect(() => {
    Geolocation.getCurrentPosition(pos => {
      const coord = pos.coords;
      console.log({coord: coord});

      setNewPosition({
        latitude: coord.latitude,
        longitude: coord.longitude,
        latitudeDelta: 0.1421,
        longitudeDelta: 0.1421,
      });
    });
  }, [mapRef]);

  console.log({newPosition: newPosition});

  return (
    <MapView
      ref={mapRef}
      provider={PROVIDER_GOOGLE}
      style={styles.map}
      region={newPosition}
      showsUserLocation={true}
      showsMyLocationButton={true}
    >
      <Marker
        title="Your title"
        coordinate={newPosition}
      />
    </MapView>
  );
};

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

export default GeoScreen;

Glutamine

Answer 15

✅ My neglect mistake was I copy-paste code without replacing the placeholder API key. From official document: https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

1. npm i react-native-maps

2. IMPORTANT: Don't forget to Enable Map SDK for Android and Map SDK for iOS on Google Cloud Platform

3. Add your API key to your manifest file (android/app/src/main/AndroidManifest.xml):

<application>
   <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/> // ***HERE I NEED TO REPLACE MY KEY AND I FORGET
</application>

4. Here is quick snippet code to make it viewable

   import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps    
   <MapView
       provider={PROVIDER_GOOGLE} // remove if not using Google Maps
       style={{
          height: 400,
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
       }}
       zoomEnabled={true}
       region={{
          latitude: 22.258,
          longitude: 71.19,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
       }}
    >
       <Marker
          coordinate={{ latitude: 22.258, longitude: 71.19 }}
          title={"title"}
          description={"test"}
       />
    </MapView>

Let's me know if this helpful.

Rigobertorigor

Answer 16

Add maxZoomLevel to your code:

<MapView
        style={styles.map}
        maxZoomLevel={3}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}
      >
      </MapView>

Billon

Answer 17

I just changed the Set an application restriction(In google cloud console) to -> None then save it, that's it

Kirkpatrick

Answer 18

In my mapView i change the mapType to 'strandred' and it worked for me before i used none as maptype so i was seeing the blank screen with only logo in it

 <MapView
      ref={mapView}
      provider={Platform.OS == "android" ? PROVIDER_GOOGLE : PROVIDER_DEFAULT}
      // provider={PROVIDER_DEFAULT}
      style={styles.map}
      region={region}
      mapType='standard'
      // mapType={Platform.OS == "android" ? "none" : "standard"}
      minZoomLevel={15}
      maxZoomLevel={20}
      onRegionChangeComplete={selectedRegion => {
        fetchLocationName(region, setLocation, autocompleteRef);
        setRegion(selectedRegion);
      }}
      // showsUserLocation={true}
      loadingEnabled={true}
      showsMyLocationButton={false}
      />

Kaufmann