react-native-map-direction

This open source library have few applications using Google Maps API.

MapViewer:

Display direction between two geolocation.

Installation:

npm i react-native-map-direction --save

General Usage:

import MapViewer from ‘react-native-map-direction’;

API KEY:

Go to https://developers.google.com/maps/documentation/ios-sdk/get-api-key and https://developers.google.com/maps/documentation/android-api/signup to get your keys for both iOS and Android.

Make sure that Google Maps Android API and Google Maps SDK for iOS are enabled for the current project.

https://console.developers.google.com/apis/library/maps-android-backend.googleapis.com/ https://console.developers.google.com/apis/library/maps-ios-backend.googleapis.com

Without an API key the Google Maps map won't render anything.

Where to ADD API KEY:

Add your API key to your manifest file in “ android/app/src/main/AndroidManifest.xml “

You will only need to add this meta-data tag, but make sure it's a child of application <application   > <meta-data     android:name="com.google.android.geo.API_KEY"     android:value="YOUR_API_KEY_HERE"/> </application   >

Issues:

If there are any Map related issues and Gradle, then follow this link :

https://itnext.io/install-react-native-maps-with-gradle-3-on-android-44f91a70a395

Customizable Features:

• Polyline: Color and Width

• Marker: Color

• View: height and width

Dependencies Used:

• ‘react-native-maps’
• ‘@mapbox/polyline’

Usage:

import MapViewer from 'react-native-map-direction'; class MapComponent extends Component {   constructor(props) {   super(props);   this.state = {   geoCode: {     startLoc: {       lat: 8.192738,       lon: -77.714723     },     destinationLoc: {       lat: 70.196917       lon: -148.419491     }
  },   screenDimension: {     width: Dimensions.get('window').width, // width     height: Dimensions.get('window').height //height   },   pinColors: {     start: 'green',     destination: 'red'   },   polyline: {     strokeColor: 'navy',     strokeWidth: 4   }   }   }   render() {     return (       <MapViewer
          geoCode={this.state.geoCode}           screenDimension={this.state.screenDimension}           pinColors={this.state.pinColors}           polyline={this.state.polyline}       />     )   }; } export default MapComponent;

Component API:

Props

| Props | Type | Note |:---:|:---:|:---: | geoCode|geoCode: {   startLoc: {     lat: Number,     lon: Number   },   destinationLoc: {     lat: Number,     lon: Number   } }| The start and destination geolocation in terms of latitude and longitude. | screenDimension|screenDimension: {   width: Number,   height: Number }|Height and width of the view in which the Map will be shown | pinColors|pinColors: {   start: ‘color_name’,   destination: ‘color_name’   }|Colors for start and destination marker | polyline|polyline: {   strokeColor: ‘color_name’,   strokeWidth: Number   }| Color and line width for the polyline