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="AIzaSyDRK50sPCRCPLTnyt0OUdng9cwP0eqPJq4"/>
    </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

回答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.

回答2:

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

回答3:

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 react-native@0.52.0 and that was not compatible with react-native-maps@0.20.1 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".

回答4:

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

回答5:

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

回答6:

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>