HomeGuidesReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

MapView

GitHub

npm

A library that provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS.

This library is listed in the Expo SDK reference because it is included in Expo Go. You may use any library of your choice with development builds.

react-native-maps provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS.

No additional setup is required when testing your project using Expo Go. However, to deploy the app binary on app stores additional steps are required for Google Maps. For more information, see the instructions below.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

Installation

Terminal
- npx expo install react-native-maps

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

Usage

See full documentation at react-native-maps/react-native-maps.

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
});

Deploy app with Google Maps

Android

If you have 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

Copy your app's SHA-1 certificate fingerprint

  • If you are deploying your app to the Google Play Store, you'll need to upload your app binary to Google Play console at least once. This is required for Google to generate your app signing credentials.
  • Go to the Google Play Console > (your app) > Release > Setup > App integrity > App Signing.
  • Copy the value of SHA-1 certificate fingerprint.
  • If you have already created a development build, your project will be signed using a debug keystore.
  • After the build is complete, go to your project's dashboard, then, under Configure > click Credentials.
  • Under Application Identifiers, click your project's package name and under Android Keystore copy the value of SHA-1 Certificate Fingerprint.

3

Create an API key

  • Go to Google Cloud Credential manager and click Create Credentials, then API Key.
  • In the modal, click Edit API key.
  • Under Key restrictions > Application restrictions, choose Android apps.
  • Under Restrict usage to your Android apps, click Add an item.
  • Add your android.package from app.json (for example: com.company.myapp) to the package name field.
  • Then, add the SHA-1 certificate fingerprint's 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.
  • 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 Android and iOS.
  • Rebuild the app binary (or re-submit to the Google Play Store in case your app is already uploaded). An easy way to test if the configuration was successful is to do an emulator build.

iOS

If you have 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.
  • Then, go to the project, click Enable APIs and Services 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 Edit API key.
  • Under Key restrictions > Application restrictions, choose iOS apps.
  • 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 (for example: 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 Android and iOS.
  • Rebuild the app binary. An easy way to test if the configuration was successful is to do a simulator build.

Configuration for web

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

To use this on the web, add the following script to your web/index.html. This script may already be present. If this is the case, replace the API_KEY with your Google Maps API key, which you can obtain here: Google Maps: Get API key.

web/index.html
<!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>