tiaanduplessis/react-native-google-maps-directions

🚕 Get direction using Google Maps in React Native 🚗

🚚 react-native-google-maps-directions 🚲

🚕 Get direction using Google Maps in React Native 🚗

Table of Contents

• About
• Install
• Usage
• API
• Contribute
• License

About

A tiny module that uses the React Native Linking API to get directions using Google Maps by opening it in the default browser or app if installed.

Install

$ npm install --save react-native-google-maps-directions

$ yarn add react-native-google-maps-directions

Usage

import getDirections from 'react-native-google-maps-directions'

export default class gmapsDirections extends Component {

  handleGetDirections = () => {
    const data = {
       source: {
        latitude: -33.8356372,
        longitude: 18.6947617
      },
      destination: {
        latitude: -33.8600024,
        longitude: 18.697459
      },
      params: [
        {
          key: "travelmode",
          value: "driving"        // may be "walking", "bicycling" or "transit" as well
        },
        {
          key: "dir_action",
          value: "navigate"       // this instantly initializes navigation using the given travel mode
        }
      ],
      waypoints: [
        {
          latitude: -33.8600025,
          longitude: 18.697452
        },
        {
          latitude: -33.8600026,
          longitude: 18.697453
        },
           {
          latitude: -33.8600036,
          longitude: 18.697493
        }
      ]
    }

    getDirections(data)
  }

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={this.handleGetDirections} title="Get Directions" />
      </View>
    );
  }
}

API

The module exports a single getDirections function that takes a object as its argument. The object may have destination (Where you're going to) and source (Where you're coming from) both of which have latitude and longitude number properties. If source is undefined, it defaults to the user's current location. If destination is undefined, it leaves it blank in Google Maps and the user will be able to enter a destination.

Additionaly parameters can be added as key-value pairs to the params array (optional). The supported parameters are listed here.

Waypoints

Waypoints should be passed as an array of objects:

[
        {
          latitude: -33.8600025,
          longitude: 18.697452,
        },
        {
          latitude: -33.8600026,
          longitude: 18.697453,
        }
]

Contribute

Contributions are welcome. Please open up an issue or create PR if you would like to help out.

Note: If editing the README, please conform to the standard-readme specification.

License

Licensed under the MIT License.

react-native-google-maps-directions's Issues

Option for fallback

In case Google Maps is not installed, it should open Apple Maps

Openin Url

everything was work on expo but in react native I get an possible Unhandled Promise Rejection (id: 0):
Error: Could not open the url: https://www.google.com/maps/dir/?api=1&travelmode=driving&dir_action=navigate&destination=*%2C2*

what should ı do?

Duplicate code

Hi @tiaanduplessis is see there's a duplicate code in the index file (see attachment). I needed to know what its use is, and if it's an oversight, I am able to do a PR to fix it.

Trying to use custom latitude and longitude value from parameters

I'm trying to set latitude and longitude destination from a value that I had. But it return blank when open up in google maps.

  handleGetDirections = (latitude, longitude) => {
     const data = {
     source: {
       latitude: -8.627666,
       longitude: 115.239225
     },
     destination: {
       latitude: latitude,
       longitude: longitude
     },
     params: [
       {
         key: "dirflg",
         value: "c"
       }
     ]
  };

  getDirections(data);
}

So how I can set a custom latitude and longitude value ?
Thank you.

Not opening in App

I have the latest google maps app installed on iOS (10.3.1)

When using this it still opens the maps link in safari

Allow for empty source

Would it be feasible to allow for empty source so Google Maps opens with the destination pre-filled and let the user specify the source directly in Google Maps?

Typescript support

Nice package!
Is there plans to add a @types package for this to stop TS complaining when it's used?

can't open maps

Could not open the url: https://www.google.com/maps/dir/?api=1&travelmode=driving&dir_action=navigate&destination=-6.4155281732857%2C106.80307019501998

Support for multiple waypoints and optimizeWayPoints

Hi,
Firstly thank you for this great package.
Is it possible for you to add support for multiple waypoints and optimize option?

Issue with displaying Dropped Pins on iOS13

I have an issue with displaying Dropped Pins on iOS13.

How to identify user reached on destination ?

How i identify in my app that user is reached his destination ? Any callback?

Unsupported link when using more than one waypoint

RN version: 0.60
Package version: 2.1.1

This is the data I supplay to getDirections method:
const data = { source: { latitude: Number(checkpoints[0].address.lat), longitude: Number(checkpoints[0].address.lng), }, destination: { latitude: Number(checkpoints[numOfCheckpoints - 1].address.lat), longitude: Number(checkpoints[numOfCheckpoints - 1].address.lng), }, params: [ { key: 'travelmode', value: 'driving', // may be "walking", "bicycling" or "transit" as well }, { key: 'dir_action', value: 'navigate', // this instantly initializes navigation using the given travel mode }, ], waypoints: [ { latitude: 39.810355, longitude: -86.135126 }, { latitude: 40.810355, longitude: -86.135126 }, ], }

I'm getting error inside maps: Google maps can't open this link.
When I use only one waypoint it works fine though.

I have my url in log:
'https://www.google.com/maps/dir/?api=1&travelmode=driving&dir_action=navigate&destination=39.881652%2C-83.057822&origin=41.925685%2C-88.122813&waypoints=39.810355,-86.135126|40.810355,-86.135126'

Auto Start Navigation

I have a requirement that on loading the google map application, have to automatically start the navigation.

Current scenario - It shows the route but user has to click on start to start navigation
I couldn't find any flag associated for the same?

Any idea how could we approach the problem?

It does not take dynamic data from api

handleGetDirections = () => {
const data = {
source: {
latitude: 19.295296,
longitude: -81.382111
},
destination: {
latitude:this.props.customer.latitude,
longitude: this.props.customer.longitude
},
params: [
{
key: "dirflg",
value: "w"
}
]
}
getDirections(data)
}
it is showing the error of Possible Unhandled Promise Rejection (id: 0):
Error: Invalid arguments provided

Does it work with waze as well?

doesn't show directions

I have installed react-native-google-map-directions version 2.1.1.
I added the following lines in the AndroidManifest.xml file















my code is:
const openMap=(item)=>{
let data={
destination:{
latitude:item.latitude,
longitude:item.longitude
},
params:[{
key:"travelmode",
value:"driving"
}],
waypoints:[]
}
getDirections(data)
}
let renderRandomMarkers=locations.map((item,key)=>(

    <Marker key={key} image={require('../assets/image/pin.png')}  coordinate={{longitude:item.longitude,latitude:item.latitude}}>
        <Callout onPress={()=>openMap(item)}>
            <View style={{flexDirection:'row'}}>
                <Text>Location :</Text>
                <Text>{item.latitude + ',' + item.longitude}</Text>
            </View>
        </Callout>
    </Marker>
))

when click the callout maps is opened, but it showing like this

Pls help me