CODEWITHSUNDEEP
androidgoogle-mapsreact-nativereact-native-maps
Стоил Янков
Стоил Янков

Reputation: 225

React-native-maps Blank page Only google logo

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

Upvotes: 19

Views: 24069

Answers (18)

Aneeb Iqbal
Aneeb Iqbal

Reputation: 21

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}
      />

Upvotes: 0

Karthik MANGINENI
Karthik MANGINENI

Reputation: 11

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

Upvotes: 0

CodeForest
CodeForest

Reputation: 36

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>

Upvotes: 0

Chanrithisak Phok - Zen 善
Chanrithisak Phok - Zen 善

Reputation: 2127

✅ 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.

Upvotes: 0

Okpo
Okpo

Reputation: 417

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;

Upvotes: 0

Maisum Abbas
Maisum Abbas

Reputation: 359

Go to your

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

Android

  1. Enable Maps SDK for Android

iOS

  1. Enable Maps SDK for iOS

Upvotes: 0

mgms_kumara
mgms_kumara

Reputation: 41

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.

Upvotes: 0

Hssikou Yassine
Hssikou Yassine

Reputation: 31

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

Upvotes: 2

Yanelis Serrano Taylor
Yanelis Serrano Taylor

Reputation: 1

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

Upvotes: 0

Mahdieh Shavandi
Mahdieh Shavandi

Reputation: 8645

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.

Upvotes: 17

kub1x
kub1x

Reputation: 3572

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.

Upvotes: 0

Hari Das
Hari Das

Reputation: 10864

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.

Upvotes: 2

Pushp
Pushp

Reputation: 1060

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>

Upvotes: 2

teerryn
teerryn

Reputation: 81

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

Upvotes: 7

Khushboo Tahir
Khushboo Tahir

Reputation: 667

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

Upvotes: 0

yeulucay
yeulucay

Reputation: 444

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

Upvotes: 8

Kristijan Tomić
Kristijan Tomić

Reputation: 121

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. enter image description here

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".

Upvotes: 1

Rex Low
Rex Low

Reputation: 2177

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.

Upvotes: 14

Related Questions