MapView

Platform Compatibility

Installation

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

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

export default function App() {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

Configuration

Deploying Google Maps to an Android standalone app

If you've already registered a project for another Google service on Android, such as Google Sign In, you enable the Maps SDK for Android on your project and jump to step 4.

1. Register a Google Cloud API project and enable the Maps SDK for Android

• Open your browser to the Google API Manager and create a project.
• Once it's created, go to the project and enable the Maps SDK for Android

2. Have your app's SHA-1 certificate fingerprint ready

• If you are deploying your app to the Google Play Store, you will need to have created a standalone app and uploaded it to Google Play at least once in order to have Google generate your app signing credentials.
  • Go to the Google Play Console → (your app) → Setup → App Integrity
  • Copy the value of SHA-1 certificate fingerprint
• If you are sideloading your APK or deploying it to another store, you will need to have created a standalone app, then run expo fetch:android:hashes and copy the Google Certificate Fingerprint.
• If you are running a debug build (development client or local debug build), your Android app will be signed using the debug keystore. See the instructions below on how to retrieve your fingerprint.

3. Create an API key

• Go to Google Cloud Credential manager and click Create Credentials, then API Key.
• In the modal, click Restrict Key.
• Under Key restrictions → Application restrictions, ensure that the Android apps radio button is chosen.
• Click the + Add package name and fingerprint button.
• Add your Android package name from app.json to the package name field.
• Add or replace the SHA-1 certificate fingerprint with the value from step 2.
• Click Done and then click Save

4. Add the API key to your project

• Copy your API Key into your app.json under the android.config.googleMaps.apiKey field.
• Rebuild the app binary and re-submit to Google Play or sideload it (depending on how you configured your API key) to test that the configuration was successful.

Deploying Google Maps to an iOS standalone app

If you've already registered a project for another Google service on iOS, such as Google Sign In, you enable the Maps SDK for iOS on your project and jump to step 3.

1. Register a Google Cloud API project and enable the Maps SDK for iOS

• Open your browser to the Google API Manager and create a project.
• Once it's created, go to the project and enable the Maps SDK for iOS

2. Create an API key

• Go to Google Cloud Credential manager and click Create Credentials, then API Key.
• In the modal, click Restrict Key.
• Choose the iOS apps radio button under Key restriction.
• Under Accept requests from an iOS application with one of these bundle identifiers, click the Add an item button.
• Add your ios.bundleIdentifier from app.json eg: com.company.myapp) to the bundle ID field.
• Click Done and then click Save

3. Add the API key to your project

• Copy your API key into app.json under the ios.config.googleMapsApiKey field.
• In your code, import { PROVIDER_GOOGLE } from react-native-maps and add the property provider=PROVIDER_GOOGLE to your <MapView>. This property works on both iOS and Android.
• Rebuild the app binary. An easy way to test that the configuration was successful is to do a simulator build.

Configuring for web

Web is experimental! We do not recommend using this library on web yet.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- At the end of the <head/> element... -->

    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY"
      type="text/javascript"
    ></script>

    <!-- Use your web API Key in place of API_KEY: https://developers.google.com/maps/documentation/javascript/get-api-key -->
  </head>

  <!-- <body /> -->
</html>

How to retrieve your debug keystore fingerprint (Android only)

All standard Expo templates use a debug keystore with fingerprint 5E:8F:16:06:2E:A3:CD:2C:4A:0D:54:78:76:BA:A6:F3:8C:AB:F6:25, that you can enter directly in the Google Cloud Credential Manager. So if you are using one of the standard Expo templates, you don't need to perform the steps below.

signingConfigs {
    debug {
        storeFile file('debug.keystore')
        storePassword 'android'
        keyAlias 'androiddebugkey'
        keyPassword 'android'
    }
}

❯ keytool -list -v -keystore ./android/app/debug.keystore
Enter keystore password: