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 React from 'react'; import MapView from 'react-native-maps'; import { StyleSheet, Text, View, Dimensions } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <MapView style={styles.mapStyle} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, mapStyle: { 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
.ca.brentvatne.growlerprowler
)android.package
from app.json
(eg: ca.brentvatne.growlerprowler
) 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.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
. You can do this by grabbing the signature from Play Console -> Your App -> Release management -> App signing, and then going to the API Dashboard -> Credentials and adding the signature to your existing credential.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.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 expo 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>