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 location
• destination: The coordinate of the destination location
• apikey: Your Google Maps API Key (request one here).

1import MapViewDirections from 'react-native-maps-directions';
2
3const origin = {latitude: 37.3318456, longitude: -122.0296002};
4const destination = {latitude: 37.771707, longitude: -122.4053769};
5const GOOGLE_MAPS_APIKEY = '…';
6
7<MapView initialRegion={…}>
8  <MapViewDirections
9    origin={origin}
10    destination={destination}
11    apikey={GOOGLE_MAPS_APIKEY}
12  />
13</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.

1<MapView initialRegion={…}>
2  <MapViewDirections
3    origin={origin}
4    destination={destination}
5    apikey={GOOGLE_MAPS_APIKEY}
6    strokeWidth={3}
7    strokeColor="hotpink"
8  />
9</MapView>

An extra note on origin and destination

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'.

1<MapViewDirections origin={{ latitude: 37.3317876, longitude: -122.0054812 }} … />
2<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.

1<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

1import React, { Component } from 'react';
2import { Dimensions, StyleSheet } from 'react-native';
3import MapView from 'react-native-maps';
4import MapViewDirections from 'react-native-maps-directions';
5
6const { width, height } = Dimensions.get('window');
7const ASPECT_RATIO = width / height;
8const LATITUDE = 37.771707;
9const LONGITUDE = -122.4053769;
10const LATITUDE_DELTA = 0.0922;
11const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
12
13const GOOGLE_MAPS_APIKEY = '…';
14
15class Example extends Component {
16
17  constructor(props) {
18    super(props);
19
20    // AirBnB's Office, and Apple Park
21    this.state = {
22      coordinates: [
23        {
24          latitude: 37.3317876,
25          longitude: -122.0054812,
26        },
27        {
28          latitude: 37.771707,
29          longitude: -122.4053769,
30        },
31      ],
32    };
33
34    this.mapView = null;
35  }
36
37  onMapPress = (e) => {
38    this.setState({
39      coordinates: [
40        ...this.state.coordinates,
41        e.nativeEvent.coordinate,
42      ],
43    });
44  }
45
46  render() {
47    return (
48      <MapView
49        initialRegion={{
50          latitude: LATITUDE,
51          longitude: LONGITUDE,
52          latitudeDelta: LATITUDE_DELTA,
53          longitudeDelta: LONGITUDE_DELTA,
54        }}
55        style={StyleSheet.absoluteFill}
56        ref={c => this.mapView = c}
57        onPress={this.onMapPress}
58      >
59        {this.state.coordinates.map((coordinate, index) =>
60          <MapView.Marker key={`coordinate_${index}`} coordinate={coordinate} />
61        )}
62        {(this.state.coordinates.length >= 2) && (
63          <MapViewDirections
64            origin={this.state.coordinates[0]}
65            waypoints={ (this.state.coordinates.length > 2) ? this.state.coordinates.slice(1, -1): null}
66            destination={this.state.coordinates[this.state.coordinates.length-1]}
67            apikey={GOOGLE_MAPS_APIKEY}
68            strokeWidth={3}
69            strokeColor="hotpink"
70            onReady={(result) => {
71              this.mapView.fitToCoordinates(result.coordinates, {
72                edgePadding: {
73                  right: (width / 20),
74                  bottom: (height / 20),
75                  left: (width / 20),
76                  top: (height / 20),
77                }
78              });
79            }}
80            onError={(errorMessage) => {
81              // console.log('GOT AN ERROR');
82            }}
83          />
84        )}
85      </MapView>
86    );
87  }
88}
89
90export default Example;

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.