File: maps.md | Updated: 11/15/2025
Hide navigation
Search
Ctrl K
Home Guides EAS Reference Learn
Reference version
SDK 53
Archive Expo Snack Discord and Forums Newsletter
Expo MapsA library that provides access to Google Maps on Android and Apple Maps on iOS.
Android
iOS
Bundled version:
~0.11.0
Copy page
This library is currently in alpha and will frequently experience breaking changes. It is not available in the Expo Go app – use development builds to try it out.
Terminal
Copy
- npx expo install expo-maps
If you are installing this in an existing React Native app
, make sure to install expo
in your project.
Expo Maps provides access to the platform native map APIs on Android and iOS.
Apple Maps (available on
iOS
only). No additional configuration is required to use it after installing this package.
Google Maps (available on
Android
only). While Google provides a Google Maps SDK for iOS, Expo Maps supports it exclusively on Android. If you want to use Google Maps on iOS, you can look into using an alternative library or writing your own .
Before you can use Google Maps on Android, you need to register a Google Cloud API project, enable the Maps SDK for Android, and add the associated configuration to your Expo project.
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
2
Copy your app's SHA-1 certificate fingerprint
For Google Play Store
For development builds
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 Project settings > 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
android.package from app.json (for example: com.company.myapp) to the package name field.4
Add the API key to your project
android.config.googleMaps.apiKey field.expo-maps.To display the user's location on the map, you need to declare and request location permission beforehand. You can configure this using its built-in config plugin if you use config plugins in your project (Continuous Native Generation (CNG) ). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does not use CNG, then you'll need to manually configure the library.
app.json
Copy
{ "expo": { "plugins": [ [ "expo-maps", { "requestLocationPermission": true, "locationPermission": "Allow $(PRODUCT_NAME) to use your location" } ] ] } }
| Name | Default | Description |
| --- | --- | --- |
| requestLocationPermission | false | A boolean to add permissions to AndroidManifest.xml and Info.plist. |
| locationPermission | "Allow $(PRODUCT_NAME) to use your location" | Only for: <br><br>iOS<br><br> <br><br>A string to set the NSLocationWhenInUseUsageDescription<br> permission message. |
import { AppleMaps, GoogleMaps } from 'expo-maps'; import { Platform, Text } from 'react-native'; export default function App() { if (Platform.OS === 'ios') { return <AppleMaps.View style={{ flex: 1 }} />; } else if (Platform.OS === 'android') { return <GoogleMaps.View style={{ flex: 1 }} />; } else { return <Text>Maps are only available on Android and iOS</Text>; } }
import { AppleMaps, GoogleMaps } from 'expo-maps'; // ApplesMaps.View and GoogleMaps.View are the React components
AppleMapsViewOnly for:
iOS
Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component) <[Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys) <[AppleMapsViewProps](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapsviewprops) , 'ref'>>
annotationsOnly for:
iOS
Optional • Type: [AppleMapsAnnotation[]](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapsannotation)
The array of annotations to display on the map.
cameraPositionOnly for:
iOS
Optional • Type: [CameraPosition](https://docs.expo.dev/versions/v53.0.0/sdk/maps#cameraposition-2)
The initial camera position of the map.
markersOnly for:
iOS
Optional • Type: [AppleMapsMarker[]](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapsmarker)
The array of markers to display on the map.
onCameraMoveOnly for:
iOS
Optional • Type: (event: { bearing: number, coordinates: [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) , tilt: number, zoom: number }) => void
Lambda invoked when the map was moved by the user.
onMapClickOnly for:
iOS
Optional • Type: (event: { coordinates: [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) }) => void
Lambda invoked when the user clicks on the map. It won't be invoked if the user clicks on POI or a marker.
onMarkerClickOnly for:
iOS 18.0+
Optional • Type: (event: [AppleMapsMarker](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapsmarker) ) => void
Lambda invoked when the marker is clicked
onPolylineClickOnly for:
iOS 18.0+
Optional • Type: (event: [AppleMapsPolyline](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapspolyline) ) => void
Lambda invoked when the polyline is clicked
polylinesOnly for:
iOS
Optional • Type: [AppleMapsPolyline[]](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapspolyline)
The array of polylines to display on the map.
propertiesOnly for:
iOS
Optional • Type: [AppleMapsProperties](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapsproperties)
The properties for the map.
refOnly for:
iOS
Optional • Type: [Ref](https://docs.expo.dev/versions/v53.0.0/sdk/maps#ref) <[AppleMapsViewType](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapsviewtype) >
styleOnly for:
iOS
Optional • Type: StyleProp<[ViewStyle](https://reactnative.dev/docs/view-style-props) >
uiSettingsOnly for:
iOS
Optional • Type: [AppleMapsUISettings](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapsuisettings)
The MapUiSettings to be used for UI-specific settings on the map.
GoogleMapsViewOnly for:
Android
Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component) <[Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys) <[GoogleMapsViewProps](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapsviewprops) , 'ref'>>
cameraPositionOnly for:
Android
Optional • Type: [CameraPosition](https://docs.expo.dev/versions/v53.0.0/sdk/maps#cameraposition-2)
The initial camera position of the map.
colorSchemeOnly for:
Android
Optional • Type: [GoogleMapsColorScheme](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapscolorscheme)
Defines the color scheme for the map.
markersOnly for:
Android
Optional • Type: [GoogleMapsMarker[]](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapsmarker)
The array of markers to display on the map.
onCameraMoveOnly for:
Android
Optional • Type: (event: { bearing: number, coordinates: [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) , tilt: number, zoom: number }) => void
Lambda invoked when the map was moved by the user.
onMapClickOnly for:
Android
Optional • Type: (event: { coordinates: [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) }) => void
Lambda invoked when the user clicks on the map. It won't be invoked if the user clicks on POI or a marker.
onMapLoadedOnly for:
Android
Optional • Type: () => void
Lambda invoked when the map is loaded.
onMapLongClickOnly for:
Android
Optional • Type: (event: { coordinates: [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) }) => void
Lambda invoked when the user long presses on the map.
onMarkerClickOnly for:
Android
Optional • Type: (event: [GoogleMapsMarker](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapsmarker) ) => void
Lambda invoked when the marker is clicked
onPOIClickOnly for:
Android
Optional • Type: (event: { coordinates: [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) , name: string }) => void
Lambda invoked when a POI is clicked.
onPolylineClickOnly for:
Android
Optional • Type: (event: [GoogleMapsPolyline](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapspolyline) ) => void
Lambda invoked when the polyline is clicked.
polylinesOnly for:
Android
Optional • Type: [GoogleMapsPolyline[]](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapspolyline)
The array of polylines to display on the map.
propertiesOnly for:
Android
Optional • Type: [GoogleMapsProperties](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapsproperties)
The properties for the map.
refOnly for:
Android
Optional • Type: [Ref](https://docs.expo.dev/versions/v53.0.0/sdk/maps#ref) <[GoogleMapsViewType](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapsviewtype) >
styleOnly for:
Android
Optional • Type: StyleProp<[ViewStyle](https://reactnative.dev/docs/view-style-props) >
uiSettingsOnly for:
Android
Optional • Type: [GoogleMapsUISettings](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapsuisettings)
The MapUiSettings to be used for UI-specific settings on the map.
userLocationOnly for:
Android
Optional • Type: [GoogleMapsUserLocation](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapsuserlocation)
User location, overrides default behavior.
GoogleStreetViewOnly for:
Android
Type: React.Element<[GoogleStreetViewProps](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlestreetviewprops) >
isPanningGesturesEnabledOnly for:
Android
Optional • Type: boolean
isStreetNamesEnabledOnly for:
Android
Optional • Type: boolean
isUserNavigationEnabledOnly for:
Android
Optional • Type: boolean
isZoomGesturesEnabledOnly for:
Android
Optional • Type: boolean
positionOnly for:
Android
Type: [StreetViewCameraPosition](https://docs.expo.dev/versions/v53.0.0/sdk/maps#streetviewcameraposition)
styleOnly for:
Android
Optional • Type: StyleProp<[ViewStyle](https://reactnative.dev/docs/view-style-props) >
useLocationPermissions(options)| Parameter | Type |
| --- | --- |
| options(optional) | PermissionHookOptions<object> |
Check or request permissions to access the location. This uses both requestPermissionsAsync and getPermissionsAsync to interact with the permissions.
Returns:
[null | PermissionResponse, RequestPermissionMethod<PermissionResponse>, GetPermissionMethod<PermissionResponse>]
Example
const [status, requestPermission] = useLocationPermissions();
Maps.getPermissionsAsync()Checks user's permissions for accessing location.
Returns:
[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) <PermissionResponse>
A promise that fulfills with an object of type PermissionResponse
.
Maps.requestPermissionsAsync()Asks the user to grant permissions for location.
Returns:
[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) <PermissionResponse>
A promise that fulfills with an object of type PermissionResponse
.
AppleMapsAnnotationOnly for:
iOS
Type: [AppleMapsMarker](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapsmarker) extended by:
| Property | Type | Description |
| --- | --- | --- |
| backgroundColor(optional) | string | The background color of the annotation. |
| icon(optional) | [SharedRefType](https://docs.expo.dev/versions/v53.0.0/sdk/maps#sharedreftype) <'image'> | The custom icon to display in the annotation. |
| text(optional) | string | The text to display in the annotation. |
| textColor(optional) | string | The text color of the annotation. |
AppleMapsMarkerOnly for:
iOS
| Property | Type | Description |
| --- | --- | --- |
| coordinates(optional) | [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) | The coordinates of the marker. |
| id(optional) | string | The unique identifier for the marker. This can be used to e.g. identify the clicked marker in the onMarkerClick event. |
| systemImage(optional) | string | The SF Symbol to display for the marker. |
| tintColor(optional) | string | The tint color of the marker. |
| title(optional) | string | The title of the marker, displayed in the callout when the marker is clicked. |
AppleMapsPolyline| Property | Type | Description |
| --- | --- | --- |
| color(optional) | [ProcessedColorValue](https://docs.expo.dev/versions/v53.0.0/sdk/maps#processedcolorvalue) \| string | The color of the polyline. |
| contourStyle(optional) | [AppleMapsContourStyle](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapscontourstyle) | The style of the polyline. |
| coordinates | [Coordinates[]](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) | The coordinates of the polyline. |
| id(optional) | string | The unique identifier for the polyline. This can be used to e.g. identify the clicked polyline in the onPolylineClick event. |
| width(optional) | number | The width of the polyline. |
AppleMapsPropertiesOnly for:
iOS
| Property | Type | Description |
| --- | --- | --- |
| isTrafficEnabled(optional) | boolean | Whether the traffic layer is enabled on the map. |
| mapType(optional) | [AppleMapsMapType](https://docs.expo.dev/versions/v53.0.0/sdk/maps#applemapsmaptype) | Defines which map type should be used. |
| polylineTapThreshold(optional) | number | The maximum distance in meters from a tap of a polyline for it to be considered a hit. If the distance is greater than the threshold, the polyline is not considered a hit. If a hit occurs, the onPolylineClick event will be triggered. Defaults to 20 meters. |
| selectionEnabled(optional) | boolean | If true, the user can select a location on the map to get more information. |
AppleMapsUISettingsOnly for:
iOS
| Property | Type | Description |
| --- | --- | --- |
| compassEnabled(optional) | boolean | Whether the compass is enabled on the map. If enabled, the compass is only visible when the map is rotated. |
| myLocationButtonEnabled(optional) | boolean | Whether the my location button is visible. |
| scaleBarEnabled(optional) | boolean | Whether the scale bar is displayed when zooming. |
| togglePitchEnabled(optional) | boolean | Whether the user is allowed to change the pitch type. |
AppleMapsViewTypeOnly for:
iOS
| Property | Type | Description |
| --- | --- | --- |
| setCameraPosition | (config: [CameraPosition](https://docs.expo.dev/versions/v53.0.0/sdk/maps#cameraposition-2) ) => void | Update camera position. Animation duration is not supported on iOS.<br><br>config: [CameraPosition](https://docs.expo.dev/versions/v53.0.0/sdk/maps#cameraposition-2) <br><br>New camera postion. |
CameraPosition| Property | Type | Description |
| --- | --- | --- |
| coordinates(optional) | [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) | The middle point of the camera. |
| zoom(optional) | number | The zoom level of the camera. For some view sizes, lower zoom levels might not be available. |
Coordinates| Property | Type | Description |
| --- | --- | --- |
| latitude(optional) | number | The latitude of the coordinate. |
| longitude(optional) | number | The longitude of the coordinate. |
GoogleMapsMarkerOnly for:
Android
| Property | Type | Description |
| --- | --- | --- |
| coordinates(optional) | [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) | The coordinates of the marker. |
| draggable(optional) | boolean | Whether the marker is draggable. |
| icon(optional) | [SharedRefType](https://docs.expo.dev/versions/v53.0.0/sdk/maps#sharedreftype) <'image'> | The custom icon to display for the marker. |
| id(optional) | string | The unique identifier for the marker. This can be used to e.g. identify the clicked marker in the onMarkerClick event. |
| showCallout(optional) | boolean | Whether the callout should be shown when the marker is clicked. |
| snippet(optional) | string | The snippet of the marker, Displayed in the callout when the marker is clicked. |
| title(optional) | string | The title of the marker, displayed in the callout when the marker is clicked. |
GoogleMapsPolylineOnly for:
Android
| Property | Type | Description |
| --- | --- | --- |
| color(optional) | [ProcessedColorValue](https://docs.expo.dev/versions/v53.0.0/sdk/maps#processedcolorvalue) \| string | The color of the polyline. |
| coordinates | [Coordinates[]](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) | The coordinates of the polyline. |
| geodesic(optional) | boolean | Whether the polyline is geodesic. |
| id(optional) | string | The unique identifier for the polyline. This can be used to e.g. identify the clicked polyline in the onPolylineClick event. |
| width(optional) | number | The width of the polyline. |
GoogleMapsPropertiesOnly for:
Android
| Property | Type | Description |
| --- | --- | --- |
| isBuildingEnabled(optional) | boolean | Whether the building layer is enabled on the map. |
| isIndoorEnabled(optional) | boolean | Whether the indoor layer is enabled on the map. |
| isMyLocationEnabled(optional) | boolean | Whether finding the user's location is enabled on the map. |
| isTrafficEnabled(optional) | boolean | Whether the traffic layer is enabled on the map. |
| mapType(optional) | [GoogleMapsMapType](https://docs.expo.dev/versions/v53.0.0/sdk/maps#googlemapsmaptype) | Defines which map type should be used. |
| maxZoomPreference(optional) | number | The maximum zoom level for the map. |
| minZoomPreference(optional) | number | The minimum zoom level for the map. |
| selectionEnabled(optional) | boolean | If true, the user can select a location on the map to get more information. |
GoogleMapsUISettingsOnly for:
Android
| Property | Type | Description |
| --- | --- | --- |
| compassEnabled(optional) | boolean | Whether the compass is enabled on the map. If enabled, the compass is only visible when the map is rotated. |
| indoorLevelPickerEnabled(optional) | boolean | Whether the indoor level picker is enabled . |
| mapToolbarEnabled(optional) | boolean | Whether the map toolbar is visible. |
| myLocationButtonEnabled(optional) | boolean | Whether the my location button is visible. |
| rotationGesturesEnabled(optional) | boolean | Whether rotate gestures are enabled. |
| scaleBarEnabled(optional) | boolean | Whether the scale bar is displayed when zooming. |
| scrollGesturesEnabled(optional) | boolean | Whether the scroll gestures are enabled. |
| scrollGesturesEnabledDuringRotateOrZoom(optional) | boolean | Whether the scroll gestures are enabled during rotation or zoom. |
| tiltGesturesEnabled(optional) | boolean | Whether the tilt gestures are enabled. |
| togglePitchEnabled(optional) | boolean | Whether the user is allowed to change the pitch type. |
| zoomControlsEnabled(optional) | boolean | Whether the zoom controls are visible. |
| zoomGesturesEnabled(optional) | boolean | Whether the zoom gestures are enabled. |
GoogleMapsUserLocationOnly for:
Android
| Property | Type | Description |
| --- | --- | --- |
| coordinates | [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) | User location coordinates. |
| followUserLocation | boolean | Should the camera follow the users' location. |
GoogleMapsViewTypeOnly for:
Android
| Property | Type | Description |
| --- | --- | --- |
| setCameraPosition | (config: [SetCameraPositionConfig](https://docs.expo.dev/versions/v53.0.0/sdk/maps#setcamerapositionconfig) ) => void | Update camera position.<br><br>config: [SetCameraPositionConfig](https://docs.expo.dev/versions/v53.0.0/sdk/maps#setcamerapositionconfig) <br><br>New camera position config. |
SetCameraPositionConfigOnly for:
Android
Type: [CameraPosition](https://docs.expo.dev/versions/v53.0.0/sdk/maps#cameraposition-2) extended by:
| Property | Type | Description |
| --- | --- | --- |
| duration(optional) | number | The duration of the animation in milliseconds. |
StreetViewCameraPositionOnly for:
Android
| Property | Type | Description |
| --- | --- | --- |
| bearing(optional) | number | - |
| coordinates | [Coordinates](https://docs.expo.dev/versions/v53.0.0/sdk/maps#coordinates) | - |
| tilt(optional) | number | - |
| zoom(optional) | number | - |
AppleMapsContourStyleOnly for:
iOS
The style of the polyline.
GEODESICAppleMapsContourStyle.GEODESIC = "GEODESIC"
A geodesic line.
STRAIGHTAppleMapsContourStyle.STRAIGHT = "STRAIGHT"
A straight line.
AppleMapsMapTypeOnly for:
iOS
The type of map to display.
HYBRIDAppleMapsMapType.HYBRID = "HYBRID"
A satellite image of the area with road and road name layers on top.
IMAGERYAppleMapsMapType.IMAGERY = "IMAGERY"
A satellite image of the area.
STANDARDAppleMapsMapType.STANDARD = "STANDARD"
A street map that shows the position of all roads and some road names.
GoogleMapsColorSchemeOnly for:
Android
DARKGoogleMapsColorScheme.DARK = "DARK"
FOLLOW_SYSTEMGoogleMapsColorScheme.FOLLOW_SYSTEM = "FOLLOW_SYSTEM"
LIGHTGoogleMapsColorScheme.LIGHT = "LIGHT"
GoogleMapsMapTypeOnly for:
Android
The type of map to display.
HYBRIDGoogleMapsMapType.HYBRID = "HYBRID"
Satellite imagery with roads and points of interest overlayed.
NORMALGoogleMapsMapType.NORMAL = "NORMAL"
Standard road map.
SATELLITEGoogleMapsMapType.SATELLITE = "SATELLITE"
Satellite imagery.
TERRAINGoogleMapsMapType.TERRAIN = "TERRAIN"
Topographic data.
To show the user's location on the map, the expo-maps library requires the following permissions:
ACCESS_COARSE_LOCATION: for approximate device locationACCESS_FINE_LOCATION: for precise device location| Android Permission | Description |
| --- | --- |
| ACCESS_COARSE_LOCATION | Allows an app to access approximate location.<br><br>> Alternatively, you might want [ACCESS_FINE_LOCATION](https://developer.android.com/reference/android/Manifest.permission#ACCESS_FINE_LOCATION) . |
| ACCESS_FINE_LOCATION | Allows an app to access precise location.<br><br>> Alternatively, you might want [ACCESS_COARSE_LOCATION](https://developer.android.com/reference/android/Manifest.permission#ACCESS_COARSE_LOCATION) . |
| FOREGROUND_SERVICE | Allows a regular application to use Service.startForeground.<br><br>> Allows a regular application to use [Service.startForeground](https://developer.android.com/reference/android/app/Service#startForeground(int,%20android.app.Notification)) . |
| FOREGROUND_SERVICE_LOCATION | Allows a regular application to use Service.startForeground with the type "location".<br><br>> Allows a regular application to use [Service.startForeground](https://developer.android.com/reference/android/app/Service#startForeground(int,%20android.app.Notification)) with the type "location". |
| ACCESS_BACKGROUND_LOCATION | Allows an app to access location in the background.<br><br>> If you're requesting this permission, you must also request either [ACCESS_COARSE_LOCATION](https://developer.android.com/reference/android/Manifest.permission#ACCESS_COARSE_LOCATION) or [ACCESS_FINE_LOCATION](https://developer.android.com/reference/android/Manifest.permission#ACCESS_FINE_LOCATION) . Requesting this permission by itself doesn't give you location access. |
The following usage description keys are used by this library:
| Info.plist Key | Description |
| --- | --- |
| NSLocationWhenInUseUsageDescription | A message that tells the user why the app is requesting access to the user’s location information while the app is running in the foreground. |