All Projects → tiaanduplessis → React Native Google Maps Directions

tiaanduplessis / React Native Google Maps Directions

Licence: mit
🚕 Get direction using Google Maps in React Native 🚗

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Google Maps Directions

React Natives App
App for the React & React Native developer community as a demo project for the React Native meetups in Germany
Stars: ✭ 20 (-87.5%)
Mutual labels:  react-native-app
Nbareact
🏀 iOS and Android NBA app created with React Native
Stars: ✭ 101 (-36.87%)
Mutual labels:  react-native-app
React Native Navigation Animation
Transition navigation component for React Native
Stars: ✭ 133 (-16.87%)
Mutual labels:  react-native-app
Maplace.js
A Google Maps Javascript plugin for jQuery.
Stars: ✭ 1,021 (+538.13%)
Mutual labels:  google-maps-api
Aws Amplify React Native Events App Workshop
This is a self-paced workshop designed for developers who want to build a React Native mobile application using mobile services from Amazon Web Services (AWS).
Stars: ✭ 59 (-63.12%)
Mutual labels:  react-native-app
Insta Snap
Instagram and Snapchat like React Native App
Stars: ✭ 107 (-33.12%)
Mutual labels:  react-native-app
React Native Maps Directions
Directions Component for `react-native-maps`
Stars: ✭ 846 (+428.75%)
Mutual labels:  google-maps-api
Reactnative Book Demo
我的出版书籍《React Native 精解与实战》配套源码
Stars: ✭ 139 (-13.12%)
Mutual labels:  react-native-app
React Native Firebase
🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
Stars: ✭ 9,674 (+5946.25%)
Mutual labels:  react-native-app
Django Easy Maps
🗺 Google Maps with easy!
Stars: ✭ 129 (-19.37%)
Mutual labels:  google-maps-api
Magento2 Google Address Lookup
Provides an address lookup service on a Magento 2 store powered by the Google Places API
Stars: ✭ 46 (-71.25%)
Mutual labels:  google-maps-api
Bikedeboa
A (Progressive) Web App to find, map and review bike parkings in the cities of Brazil.
Stars: ✭ 54 (-66.25%)
Mutual labels:  google-maps-api
React Native Firebase Chat
React Native chat application using firebase.
Stars: ✭ 113 (-29.37%)
Mutual labels:  react-native-app
Nsfwjs Mobile
NSFWjs in React Native
Stars: ✭ 35 (-78.12%)
Mutual labels:  react-native-app
Google Maps Autocomplete
Autocomplete input component and directive for google-maps built with angular and material design | ANGULAR V9 SUPPORTED
Stars: ✭ 134 (-16.25%)
Mutual labels:  google-maps-api
React Native Boilerplate
🚀 React Native Boilerplate Updated
Stars: ✭ 9 (-94.37%)
Mutual labels:  react-native-app
Complete Google Map Api Tutorial
Learn How to use Google Map API for Android from Basic to Advance with complete examples.
Stars: ✭ 104 (-35%)
Mutual labels:  google-maps-api
Carmarker Animation
This android library will help to show the marker move along the route and turn smoothly along the road curves.
Stars: ✭ 154 (-3.75%)
Mutual labels:  google-maps-api
Qrcode
React Native app for scanning and creating QR codes
Stars: ✭ 138 (-13.75%)
Mutual labels:  react-native-app
React Native Pjsip App
Mobile VoIP application (android & ios) based on PjSIP and ReactNative
Stars: ✭ 125 (-21.87%)
Mutual labels:  react-native-app

🚚 react-native-google-maps-directions 🚲

🚕 Get direction using Google Maps in React Native 🚗

Greenkeeper badge npm version Downloads Standard Travis Build

Table of Contents

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>
    );
  }
}
Demo usage

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].