React-native-maps-directions-battere NPM

`react-native-maps-directions`

Directions component for react-native-maps – Draw a route between two coordinates, powered by the Google Maps Directions API

react-native-maps-directions

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

import MapViewDirections from 'react-native-maps-directions';

const origin = {latitude: 37.3318456, longitude: -122.0296002};
const destination = {latitude: 37.771707, longitude: -122.4053769};
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>

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

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

import React, { Component } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.771707;
const LONGITUDE = -122.4053769;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const GOOGLE_MAPS_APIKEY = '…';

class Example extends Component {

  constructor(props) {
    super(props);

    // AirBnB's Office, and Apple Park
    this.state = {
      coordinates: [
        {
          latitude: 37.3317876,
          longitude: -122.0054812,
        },
        {
          latitude: 37.771707,
          longitude: -122.4053769,
        },
      ],
    };

    this.mapView = null;
  }

  onMapPress = (e) => {
    this.setState({
      coordinates: [
        ...this.state.coordinates,
        e.nativeEvent.coordinate,
      ],
    });
  }

  render() {
    return (
      <MapView
        initialRegion={{
          latitude: LATITUDE,
          longitude: LONGITUDE,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA,
        }}
        style={StyleSheet.absoluteFill}
        ref={c => this.mapView = c}
        onPress={this.onMapPress}
      >
        {this.state.coordinates.map((coordinate, index) =>
          <MapView.Marker key={`coordinate_${index}`} coordinate={coordinate} />
        )}
        {(this.state.coordinates.length >= 2) && (
          <MapViewDirections
            origin={this.state.coordinates[0]}
            waypoints={ (this.state.coordinates.length > 2) ? this.state.coordinates.slice(1, -1): null}
            destination={this.state.coordinates[this.state.coordinates.length-1]}
            apikey={GOOGLE_MAPS_APIKEY}
            strokeWidth={3}
            strokeColor="hotpink"
            onReady={(result) => {
              this.mapView.fitToCoordinates(result.coordinates, {
                edgePadding: {
                  right: (width / 20),
                  bottom: (height / 20),
                  left: (width / 20),
                  top: (height / 20),
                }
              });
            }}
            onError={(errorMessage) => {
              // console.log('GOT AN ERROR');
            }}
          />
        )}
      </MapView>
    );
  }
}

export default Example;