react-native-maps
provides a Map component that uses Apple Maps or Google Maps on iOS and Google Maps on Android. Expo uses react-native-maps at react-community/react-native-maps. No setup required for use within the Expo client app. See below for instructions on how to configure for deployment as a standalone app on Android and iOS.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
expo install react-native-maps
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
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, }, });
app.json
, copy the API key from android.config.googleSignIn
to android.config.googleMaps.apiKey
.android.package
)android.package
value from step #1 to the Package name field.expo fetch:android:hashes
.Google Certificate Fingerprint
from the output from step 9 and insert it in the "SHA-1 certificate fingerprint" field and click Done.app.json
under the android.config.googleMaps.apiKey
field. See an example diff.Save
and then rebuild the app like in step 1.expo fetch:android:hashes
. To do this:ios.bundleIdentifier
from app.json
(eg: ca.brentvatne.growlerprowler
) to the bundle ID field.app.json
under the ios.config.googleMapsApiKey
field.Save
and then rebuild the app.{ PROVIDER_GOOGLE }
from react-native-maps
and add the property provider=PROVIDER_GOOGLE
to your <MapView>
. This property works on both iOS and Android.Constants.manifest.ios.config.googleMapsApiKey
) if you'd prefer not to have the API key in your code.[GMSServices provideApiKey:@"your api key"]
GMSApiKey
key in your app's Info.plist
. If you ejected after already configuring Google Maps, the eject
command may have already provided this for you.Web is experimental! You may need to add the web target to your Expo app.
web/index.html
. This script may already be present, if this is the case, just replace the API_KEY
with your Google Maps API key which you can obtain here: Google Maps: Get API key<!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>