react-native-maps-directions
Directions component for react-native-maps
– Draw a route between two coordinates, powered by the Google Maps Directions API
Installation
yarn add react-native-maps-directions
Basic Usage
Import MapViewDirections
and render it as a child of a MapView
component. The mandatory MapViewDirections
props are:
origin
: The coordinate of the origin locationdestination
: The coordinate of the destination locationapikey
: Your Google Maps API Key (request one here).
; const origin = latitude: 373318456 longitude: -1220296002;const destination = latitude: 37771707 longitude: -1224053769;const GOOGLE_MAPS_APIKEY = '…'; <MapView initialRegion=…> <MapViewDirections origin=origin destination=destination apikey=GOOGLE_MAPS_APIKEY /></MapView>
Once the directions in between destination
and origin
has been fetched, a MapView.Polyline
between the two will be drawn.
Component API
Props
Prop | Type | Default | Note |
---|---|---|---|
origin |
LatLng or String |
The origin location. | |
destination |
LatLng or String |
The destination location. | |
apikey |
String |
Your Google Maps API Key (request one here). | |
waypoints |
[LatLng or String ] |
Array of waypoints to use between origin and destination. | |
language |
String |
"en" |
The language to use when calculating directions. See here for more info. |
mode |
String |
"driving" |
Which transportation mode to use when calculating directions. Allowed values are "driving" , "bicycling" , "walking" , and "transit" . (See here for more info). |
More props
Since the result rendered on screen is a MapView.Polyline
component, all MapView.Polyline
props – except for coordinates
– are also accepted.
<MapView initialRegion=…> <MapViewDirections origin=origin destination=destination apikey=GOOGLE_MAPS_APIKEY strokeWidth=3 strokeColor="hotpink" /></MapView>
origin
and destination
An extra note on origin
and destination
can be coordinates in the form of objects with latitude
and longitude
keys, or coordinates in the form of a string in the format 'latitude,longitude'
.
<MapViewDirections origin= latitude: 373317876 longitude: -1220054812 … /><MapViewDirections origin="37.3317876,-122.0054812" … />
Additionally origin
and destination
can also be location names. The Google Directions API will translate those to coordinates for you.
<MapViewDirections origin="Apple Park Visitor Center, Cupertino, CA, USA" … />
Don't forget to tweak the language
prop when using localized location names.
Events/Callbacks
Event Name | Returns | Notes |
---|---|---|
onReady |
{ distance: Number, duration: Number, coordinates: [] } |
Callback that is called when the routing has been calculated. |
onError |
errorMessage |
Callback that is called in case the routing has failed. |
Extended Example
This example will draw a route between AirBnB's Office and Apple's HQ
;;;; const width height = Dimensions;const ASPECT_RATIO = width / height;const LATITUDE = 37771707;const LONGITUDE = -1224053769;const LATITUDE_DELTA = 00922;const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; const GOOGLE_MAPS_APIKEY = '…'; { superprops; // AirBnB's Office, and Apple Park thisstate = coordinates: latitude: 373317876 longitude: -1220054812 latitude: 37771707 longitude: -1224053769 ; thismapView = null; } { this; } { return <MapView initialRegion= latitude: LATITUDE longitude: LONGITUDE latitudeDelta: LATITUDE_DELTA longitudeDelta: LONGITUDE_DELTA style=StyleSheetabsoluteFill ref= thismapView = c onPress=thisonMapPress > thisstatecoordinates thisstatecoordinateslength >= 2 && <MapViewDirections origin=thisstatecoordinates0 waypoints= thisstatecoordinateslength > 2 ? thisstatecoordinates: null destination=thisstatecoordinatesthisstatecoordinateslength-1 apikey=GOOGLE_MAPS_APIKEY strokeWidth=3 strokeColor="hotpink" onReady= { thismapView; } onError= { // console.log('GOT AN ERROR'); } /> </MapView> ; } ;
Changelog
Please see CHANGELOG for more information on what has changed recently.
Credits
- Bram(us) Van Damme (https://www.bram.us/)
- All Contributors
This code is inspired upon the article React Native Maps with Google Directions Api by Ali Oğuzhan Yıldız.
License
The MIT License (MIT). Please see License File for more information.