Reference version

Archive Expo Snack Discord and Forums Newsletter

Expo Maps

GitHub

npm

A library that provides access to Google Maps on Android and Apple Maps on iOS.

Android

iOS

Expo Maps is currently in alpha and subject to breaking changes. It is not available in the Expo Go app.

Installation

Terminal

- npx expo install expo-maps

If you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.

Configuration

Expo Maps provides access to the platform native map APIs on Android and iOS.

Apple Maps is available on iOS only. No additional configuration is required to use it after installing this package.
Google Maps is 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.

Set up Google Maps on 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.

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.

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.

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.

Add the API key to your project

Copy your API Key into your app.json under the android.config.googleMaps.apiKey field.
Create a new development build, and you can now use the Google Maps API on Android with expo-maps.

Usage

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>;
  }
}

API

import { AppleMaps, GoogleMaps } from 'expo-maps';

// ApplesMaps.View and GoogleMaps.View are the React components

Components

`AppleMapsView`

Android

iOS

Type: React.Element<MapProps>

`GoogleMapsView`

Android

iOS

Type: React.Element<MapProps>

Props

`annotations`

Android

iOS

Optional • Type: Annotation[]

The array of annotations to display on the map.

`cameraPosition`

Android

iOS

Optional • Type: CameraPosition

The initial camera position of the map.

`markers`

Android

iOS

Optional • Type: Marker[]

The array of markers to display on the map.

`onCameraMove`

Android

iOS

Optional • Type:

(event: {
  bearing: number, 
  coordinates: Coordinates, 
  tilt: number, 
  zoom: number
}) => void

Lambda invoked when the map was moved by the user.

event: {
  bearing: number, 
  coordinates: Coordinates, 
  tilt: number, 
  zoom: number
}

`onMapClick`

Android

iOS

Optional • Type:

(event: {
  coordinates: 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.

event: {
  coordinates: Coordinates
}

`onMarkerClick`

Android

iOS

Optional • Type: (event: Marker) => void

Lambda invoked when the marker is clicked

event: Marker

`properties`

Android

iOS

Optional • Type: MapProperties

The properties for the map.

`style`

Android

iOS

Optional • Type: StyleProp<ViewStyle>

`uiSettings`

Android

iOS

Optional • Type: MapUiSettings

The MapUiSettings to be used for UI-specific settings on the map.

`cameraPosition`

Android

iOS

Optional • Type: CameraPosition

The initial camera position of the map.

`colorScheme`

Android

iOS

Optional • Type: MapColorScheme

Defines the color scheme for the map.

`markers`

Android

iOS

Optional • Type: Marker[]

The array of markers to display on the map.

`onCameraMove`

Android

iOS

Optional • Type:

(event: {
  bearing: number, 
  coordinates: Coordinates, 
  tilt: number, 
  zoom: number
}) => void

Lambda invoked when the map was moved by the user.

event: {
  bearing: number, 
  coordinates: Coordinates, 
  tilt: number, 
  zoom: number
}

`onMapClick`

Android

iOS

Optional • Type:

(event: {
  coordinates: 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.

event: {
  coordinates: Coordinates
}

`onMapLoaded`

Android

iOS

Optional • Type: () => void

Lambda invoked when the map is loaded.

`onMapLongClick`

Android

iOS

Optional • Type:

(event: {
  coordinates: Coordinates
}) => void

Lambda invoked when the user long presses on the map.

event: {
  coordinates: Coordinates
}

`onMarkerClick`

Android

iOS

Optional • Type: (event: Marker) => void

Lambda invoked when the marker is clicked

event: Marker

`onPOIClick`

Android

iOS

Optional • Type:

(event: {
  coordinates: Coordinates, 
  name: string
}) => void

Lambda invoked when a POI is clicked.

event: {
  coordinates: Coordinates, 
  name: string
}

`properties`

Android

iOS

Optional • Type: MapProperties

The properties for the map.

`style`

Android

iOS

Optional • Type: StyleProp<ViewStyle>

`uiSettings`

Android

iOS

Optional • Type: MapUiSettings

The MapUiSettings to be used for UI-specific settings on the map.

`userLocation`

Android

iOS

Optional • Type: UserLocation

User location, overrides default behavior.

`isPanningGesturesEnabled`

Android

iOS

Optional • Type: boolean

`isStreetNamesEnabled`

Android

iOS

Optional • Type: boolean

`isUserNavigationEnabled`

Android

iOS

Optional • Type: boolean

`isZoomGesturesEnabled`

Android

iOS

Optional • Type: boolean

`position`

Android

iOS

Optional • Type: Coordinates

`style`

Android

iOS

Optional • Type: StyleProp<ViewStyle>

Namespaces

`AppleMaps`

Android

iOS

AppleMaps Methods

`View(namedParameters)`

Android

iOS

Parameter	Type
namedParameters	`MapProps`

Returns:

null | Element

`GoogleMaps`

Android

iOS

GoogleMaps Methods

`getPermissionsAsync()`

Android

iOS

Returns:

Promise<undefined | PermissionResponse>

`requestPermissionsAsync()`

Android

iOS

Returns:

Promise<undefined | PermissionResponse>

`StreetView(props)`

Android

iOS

Parameter	Type
props	`StreetViewProps`

Returns:

null | Element

`View(namedParameters)`

Android

iOS

Parameter	Type
namedParameters	`MapProps`

Returns:

null | Element

Types

`Annotation`

Android

iOS

Type: Marker extended by:

Property	Type	Description
backgroundColor(optional)	`string`	The background color of the annotation.
icon(optional)	`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.

`CameraPosition`

Android

iOS

Property	Type	Description
coordinates(optional)	`Coordinates`	The middle point of the camera.
zoom(optional)	`number`	The zoom level of the camera. For some view sizez, lower zoom levels might not be available.

`CameraPosition`

Android

iOS

Property	Type	Description
coordinates(optional)	`Coordinates`	The middle point of the camera.
zoom(optional)	`number`	The zoom level of the camera. For some view sizez, lower zoom levels might not be available.

`Coordinates`

Android

iOS

Property	Type	Description
latitude(optional)	`number`	The latitude of the coordinate.
longitude(optional)	`number`	The longitude of the coordinate.

`GoogleMapsModule`

Android

iOS

Property	Type	Description
getPermissionsAsync	`() => Promise<PermissionResponse>`	Checks user's permissions for accessing location.
requestPermissionsAsync	`() => Promise<PermissionResponse>`	Asks the user to grant permissions for location.

`MapProperties`

Android

iOS

Property	Type	Description
isTrafficEnabled(optional)	`boolean`	Whether the traffic layer is enabled on the map.
mapType(optional)	`MapType`	Defines which map type should be used.
selectionEnabled(optional)	`boolean`	If true, the user can select a location on the map to get more information.

`MapProperties`

Android

iOS

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)	`MapType`	Defines which map type should be used.
maxZoomPreference(optional)	`number`	Only for: Android The maximum zoom level for the map.
minZoomPreference(optional)	`number`	Only for: Android The minimum zoom level for the map.
selectionEnabled(optional)	`boolean`	Only for: iOS If true, the user can select a location on the map to get more information.

`MapUiSettings`

Android

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.

`MapUiSettings`

Android

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.
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`	Only for: iOS 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`	Only for: iOS 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.

`Marker`

Android

iOS

Property	Type	Description
coordinates(optional)	`Coordinates`	The coordinates of the marker.
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.

`Marker`

Android

iOS

Property	Type	Description
coordinates(optional)	`Coordinates`	The coordinates of the marker.
draggable(optional)	`boolean`	Whether the marker is draggable.
icon(optional)	`SharedRefType<'image'>`	The custom icon to display for the marker.
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.

`UserLocation`

Android

iOS

Property	Type	Description
coordinates	`Coordinates`	User location coordinates.
followUserLocation	`boolean`	Should the camera follow the users location.

Enums

`MapColorScheme`

Android

iOS

`DARK`

MapColorScheme.DARK ＝ "DARK"

`FOLLOW_SYSTEM`

MapColorScheme.FOLLOW_SYSTEM ＝ "FOLLOW_SYSTEM"

`LIGHT`

MapColorScheme.LIGHT ＝ "LIGHT"

`MapType`

Android

iOS

The type of map to display.

`HYBRID`

MapType.HYBRID ＝ "HYBRID"

Satellite imagery with roads and points of interest overlayed.

`IMAGERY`

MapType.IMAGERY ＝ "IMAGERY"

Satellite imagery.

`STANDARD`

MapType.STANDARD ＝ "STANDARD"

Standard road map.

`MapType`

Android

iOS

The type of map to display.

`HYBRID`

MapType.HYBRID ＝ "HYBRID"

Satellite imagery with roads and points of interest overlayed.

`NORMAL`

MapType.NORMAL ＝ "NORMAL"

Standard road map.

`SATELLITE`

MapType.SATELLITE ＝ "SATELLITE"

Satellite imagery.

`TERRAIN`

MapType.TERRAIN ＝ "TERRAIN"

Topographic data.