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 |