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 origin location to start routing fromdestination
: The destination location to start routing toapikey
: Your Google Maps Directions API Key (request one here; if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Directions API for that key using the Google API Console).
; 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. Whenever one of both changes, new directions will be fetched and rendered.
Component API
Props
Prop | Type | Default | Note |
---|---|---|---|
origin |
LatLng or String |
The origin location to start routing from. | |
destination |
LatLng or String |
The destination location to start routing to. | |
apikey |
String |
Your Google Maps API Key (request one here; if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Directions API for that key using the Google API Console by hitting the “Enable APIs and Services“ button). | |
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). |
resetOnChange |
boolean |
true |
Tweak if the rendered MapView.Polyline should reset or not when calculating the route between origin and destionation . Set to false if you see the directions line glitching. |
directionsServiceBaseUrl |
string |
(Google's) | Base URL of the Directions Service (API) you are using. By default the Google Directions API is used ("https://maps.googleapis.com/maps/api/directions/json" ). Usually you won't need to change this. |
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 The values for the origin
and destination
props can take several forms. They can either be:
- Coordinates in the form of an object with
latitude
andlongitude
keys - Coordinates in the form of a string with
latitude
andlongitude
values separated by a comma - Strings representing an address
- Strings representing a location
- Strings containing a Place Id from the Google Maps Place API prefixed with
place_id:
All examples below have the same origin
location, represented in the formats mentioned above:
<MapViewDirections origin= latitude: 373317876 longitude: -1220054812 destination="…" /><MapViewDirections origin="37.3317876,-122.0054812" destination="…" /><MapViewDirections origin="Apple Park Visitor Center" destination="…" /><MapViewDirections origin="10600 N Tantau Ave, Cupertino, CA 95014, USA" destination="…" /><MapViewDirections origin="place_id:ChIJW5i0tJC1j4ARoUGtkogTaUU" destination="…" />
Note: The origin
and destination
props don't need to use the same representation, you may mix them.
Tip: Don't forget to tweak the language
prop when using localized location names.
Events/Callbacks
Event Name | Returns | Notes |
---|---|---|
onStart |
{ origin, destination, waypoints: [] } |
Callback that is called when the routing has started. |
onReady |
{ distance: Number, duration: Number, coordinates: [], fare: Object } |
Callback that is called when the routing has succesfully finished. Note: distance returned in kilometers and duration in minutes. |
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" onStart= { console; } onReady= { console console 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.