expo-web-maps

react-native-maps extension with compatibility for expo web.

Utilizes the Google Maps JavaScript API

Requires additional setup with google

Installation

Expo

npx expo install expo-web-maps

Add the following to your app config:

...
web: {
  ...
  config: {
    ...
    googleMapsApiKey: YOUR_API_KEY,
  },
},

Then follow the additional iOS and Android installation instructions for react-native-maps: https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

Bare React Native

Use react-native-maps

Using the example app

• Clone the project

git clone [email protected]:jmdoan1/expo-web-maps.git

• cd into the project

cd expo-web-maps

• install dependencies

npm i
cd example
npm i
cd ios
pod install

• create a .env file in the example folder and copy over the placeholders from .envexample
• Add your own google maps js api key: https://developers.google.com/maps/documentation/javascript/get-api-key
• Add your own map id: https://developers.google.com/maps/documentation/javascript/advanced-markers/start#create_a_map_id
• From the example folder, run the project on web

cd example #if necessary
npx expo start --web

• Play around in the example/App.tsx file
  • All props are currently utilized in the example except for style

Supported Components

MapView

Props

Property	Default	iOS	Android	Web	Description
cacheEnabled	false	Apple Maps only	Supported	Not supported	If true map will be cached and displayed as an image instead of being interactable, for performance usage.
camera		Supported	Supported	Supported	The camera view the map should display. Use the camera system, instead of the region system, if you need control over the pitch or heading.
compassOffset		Apple Maps only	Not supported	Not supported	If set, changes the position of the compass.
customMapStyle		Google Maps only	Supported	Supported (Do not use if using Marker components)	Adds custom styling to the map component. See README for more information.
followsUserLocation	false	Apple Maps only	Not supported	Not supported	If true the map will focus on the user's location. This only works if showsUserLocation is true and the user has shared their location.
initialCamera		Supported	Supported	Supported	The initial camera view the map should use. Use this prop instead of camera only if you don't want to control the camera of the map besides the initial view.
initialRegion		Supported	Supported	Supported	The initial region to be displayed by the map. Use this prop instead of region only if you don't want to control the viewport of the map besides the initial region.
kmlSrc		Google Maps only	Supported	Supported	The URL for KML file.
legalLabelInsets		Apple Maps only	Not supported	Not supported	If set, changes the position of the "Legal" label link in Apple maps.
liteMode		Not supported	Supported	Not supported	Enables lite mode on Android.
googleMapId		Google Maps only	Supported	Supported (Required if using Markers)	Google cloud mapId to enable cloud styling and more.
googleRenderer	LATEST	Not supported	Supported	Not supported. Use renderingType	Google maps renderer.
loadingBackgroundColor	#FFFFFF	Apple Maps only	Supported	Supported	Sets loading background color.
loadingEnabled	false	Apple Maps only	Supported	Not supported	If true a loading indicator will show while the map is loading.
loadingIndicatorColor	#606060	Apple Maps only	Supported	Not supported	Sets loading indicator color.
mapPadding		Supported	Supported	Not supported -- TODO	Adds custom padding to each side of the map. Useful when map elements/markers are obscured.
mapType	standard	hybrid, mutedStandard, satellite, standard, terrain, hybridFlyover, satelliteFlyover	hybrid, none, satellite, standard, terrain	Not supported. Use mapTypeWeb	The map type to be displayed.
mapTypeWeb		Not supported	Not supported	hybrid, roadmap, satellite, terrain	The map type to be displayed.
maxDelta		Apple Maps only	Not supported	Not supported	TODO: Add documentation
maxZoomLevel	20	Supported	Supported	Supported	Maximum zoom value for the map, must be between 0 and 20.
minDelta		Apple Maps only	Not supported	Not supported	TODO: Add documentation
minZoomLevel	0	Supported	Supported	Supported	Minimum zoom value for the map, must be between 0 and 20.
moveOnMarkerPress	true	Not supported	Supported	TODO	If false the map won't move to the marker when pressed.
onCalloutPress		Apple Maps only	Supported	TODO	Callback that is called when a callout is tapped by the user.
onDoublePress		Apple Maps only	Supported	Supported	Callback that is called when user double taps on the map.
onIndoorBuildingFocused		Google Maps only	Supported	TODO	Callback that is called when an indoor building is focused/unfocused.
onIndoorLevelActivated		Google Maps only	Supported	TODO	Callback that is called when a level on indoor building is activated.
onKmlReady		Google Maps only	Supported	Partially supported (returns empty event)	Callback that is called once the kml is fully loaded.
onLongPress		Supported	Supported	TODO	Callback that is called when user makes a "long press" somewhere on the map.
onMapLoaded		Google Maps only	Supported	Partially supported (returns empty event)	Callback that is called when the map has finished rendering all tiles.
onMapReady		Supported	Supported	Not supported	Callback that is called once the map is ready.
onMarkerDeselect		Supported	Supported	TODO	Callback that is called when a marker on the map becomes deselected.
onMarkerDrag		Apple Maps only	Supported	TODO	Callback called continuously as a marker is dragged.
onMarkerDragEnd		Apple Maps only	Supported	TODO	Callback that is called when a drag on a marker finishes.
onMarkerDragStart		Apple Maps only	Supported	TODO	Callback that is called when the user initiates a drag on a marker (if it is draggable).
onMarkerPress		Supported	Supported	TODO	Callback that is called when a marker on the map is tapped by the user.
onMarkerSelect		Supported	Supported	TODO	Callback that is called when a marker on the map becomes selected.
onPanDrag		Supported	Supported	TODO	Callback that is called when user presses and drags the map.
onPoiClick		Google Maps only	Supported	TODO	Callback that is called when user click on a POI.
onPress		Supported	Supported	Supported	Callback that is called when user taps on the map.
onRegionChange		Supported	Supported	TODO	Callback that is called continuously when the region changes.
onRegionChangeComplete		Supported	Supported	TODO	Callback that is called once when the region changes.
onUserLocationChange		Supported	Supported	TODO	Callback that is called when the underlying map figures our users current location.
paddingAdjustmentBehavior		Google Maps only	Not supported	Not supported	Indicates how/when to affect padding with safe area insets.
pitchEnabled	true	Google Maps only	Supported	TODO	If false the user won't be able to adjust the camera’s pitch angle.
provider		Supported	Supported	Supported	The map framework to use.
region		Supported	Supported	Supported	The region to be displayed by the map.
renderingType	RASTER	Not supported	Not supported	Supported	Google maps rendering type.
rotateEnabled	true	Google Maps only	Supported	TODO	If false the user won't be able to adjust the camera’s pitch angle.
scrollDuringRotateOrZoomEnabled	true	Google Maps only	Supported	TODO	If false the map will stay centered while rotating or zooming.
scrollEnabled	true	Supported	Supported	TODO	If false the user won't be able to change the map region being displayed.
showsBuildings	true	Not supported	Supported	TODO	A Boolean indicating whether the map displays extruded building information.
showsCompass	true	Supported	Supported	Not supported	If false compass won't be displayed on the map.
showsIndoorLevelPicker	false	Google Maps only	Supported	TODO	A Boolean indicating whether indoor level picker should be enabled.
showsIndoors	true	Google Maps only	Supported	TODO	A Boolean indicating whether indoor maps should be enabled.
showsMyLocationButton	true	Google Maps only	Supported	TODO	If false hide the button to move map to the current user's location.
showsPointsOfInterest	true	Maybe Apple Maps?	Not supported	TODO	If false points of interest won't be displayed on the map.
showsScale	true	Apple Maps only	Not supported	Not supported	A Boolean indicating whether the map shows scale information.
showsTraffic	false	Supported	Not supported?	Supported	A Boolean value indicating whether the map displays traffic information.
showsUserLocation	false	Supported	Supported	TODO	If true the users location will be displayed on the map. This will cause iOS to ask for location permissions.
tintColor	System Blue	Apple Maps only	Not supported	Not supported	Sets the tint color of the map. (Changes the color of the position indicator)
toolbarEnabled	true	Not supported	Supported	TODO?	If false will hide 'Navigate' and 'Open in Maps' buttons on marker press.
userInterfaceStyle	System setting	Apple Maps only (iOS >= 13.0)	Not supported	Not supported	Sets the map to the style selected.
userLocationAnnotationTitle	My Location	Apple Maps only	Not supported	Not supported	The title of the annotation for current user location.
userLocationCalloutEnabled	false	Apple Maps only	Not supported	Not supported	If true clicking user location will show the default callout for userLocation annotation.
userLocationFastestInterval	5000	Not supported	Supported	TODO?	Fastest interval the application will actively acquire locations.
userLocationPriority	high	Not supported	Supported	TODO?	Set power priority of user location tracking.
userLocationUpdateInterval	5000	Not supported	Supported	TODO?	Interval of user location updates in milliseconds.
zoomControlEnabled	true	Not supported	Supported	Supported	If false the zoom control at the bottom right of the map won't be visible.
zoomEnabled	true	Supported	Supported	TODO	If false the user won't be able to pinch/zoom the map.
zoomTapEnabled	true	Google Maps only	Not supported	TODO?	If false the user won't be able to double tap to zoom the map.
cameraZoomRange		13.0+	Not supported	Not supported	Map camera distance limits. minCenterCoordinateDistance for minimum distance, maxCenterCoordinateDistance for maximum.

Marker

Props

Integration Pending

Callout

Props

Integration Pending

TODO

• Additional MapViewProps integration
• Marker props integration
• Callout props integration
• Add other components from react-native-web
  • Polygon
  • Polyline
  • Circle
  • Overlay
  • Heatmap
  • Geojson

All documentation below this line was autogenerated and serves only as a placeholder

API documentation

• Documentation for the main branch
• Documentation for the latest stable release

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npm install expo-web-maps

Configure for iOS

Run npx pod-install after installing the npm package.

Configure for Android

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.