In this blog, we will learn about how to implement map view, add markers and draw navigation route between two markers.
Well, React Native is one of the best platforms for mobile application development.
But the official documents do not provide any way to integrate the maps/directions/navigation in your application.
Integrating this simple, but procedural, please follow through the lines written along
So, without wasting further time, let’s get started.
Things You Need To Get Started :
Installation Steps :
|
1 2 3 |
npm install react-native-maps --save npm install react-native-maps-directions --save |
Before You Start Coding
Now, you need to do some manual changes in your android and ios directories respectively.
Let’s Start with the Android configuration first.
Android Changes
In your project level build.gradle file (path to this file: android –> build.gradle )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
// Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { ext { buildToolsVersion = "27.0.3" minSdkVersion = 16 compileSdkVersion = 27 targetSdkVersion = 27 supportLibVersion = "27.1.1" googlePlayServicesVersion = "15.0.0" // Make Sure This line is added over here only androidMapsUtilsVersion = "0.5+" } repositories { google() jcenter() } dependencies { classpath 'com.android.tools.build:gradle:3.1.4' classpath 'com.google.gms:google-services:3.2.1' // Make Sure This line is added over here only // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } } allprojects { repositories { mavenLocal() google() jcenter() maven { url "$rootDir/../node_modules/react-native/android" } maven { url 'https://maven.google.com/' // Make Sure This block is added over here only name 'Google' } } } |
In your module level build.gradle file (path to this file: android–> app–>build.gradle)
|
1 2 3 4 5 6 7 |
// other lines of file dependencies { // Your other dependencies implementation project(':react-native-maps') implementation "com.google.android.gms:play-services-base:15.0.0" } |
Now you need to add Your Google Map API key in your AndroidManifest.xml file
|
1 2 3 4 5 6 7 8 9 10 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.react.native.myproject"> <application> <meta-data android:name="com.google.android.geo.API_KEY" android:value="Your Google Maps Api Key Goes here" /> </application> </manifest> |
iOS Changes
Setup your Podfile (found at ios/Podfile as below, replacing all references to _YOUR_PROJECT_TARGET_ with your project target (it’s the same as project name by default).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
# Uncomment the next line to define a global platform for your project # platform :ios, '9.0' target '_YOUR_PROJECT_TARGET_' do rn_path = '../node_modules/react-native' rn_maps_path = '../node_modules/react-native-maps' # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec" pod 'React', path: rn_path, subspecs: [ 'Core', 'CxxBridge', 'DevSupport', 'RCTActionSheet', 'RCTAnimation', 'RCTGeolocation', 'RCTImage', 'RCTLinkingIOS', 'RCTNetwork', 'RCTSettings', 'RCTText', 'RCTVibration', 'RCTWebSocket', ] # React Native third party dependencies podspecs pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec" pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec" # If you are using React Native <0.54, you will get the following error: # "The name of the given podspec `GLog` doesn't match the expected one `glog`" # Use the following line instead: #pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec" pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec" # react-native-maps dependencies pod 'react-native-maps', path: rn_maps_path # pod 'react-native-google-maps', path: rn_maps_path # Uncomment this line if you want to support GoogleMaps on iOS # pod 'GoogleMaps' # Uncomment this line if you want to support GoogleMaps on iOS # pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS end post_install do |installer| installer.pods_project.targets.each do |target| if target.name == 'react-native-google-maps' target.build_configurations.each do |config| config.build_settings['CLANG_ENABLE_MODULES'] = 'No' end end if target.name == "React" target.remove_from_project end end end |
Then run in the ios folder
|
1 |
pod install |
Enabling Google Maps on iOS
If you want to enable Google Maps on iOS, obtain the Google API key and edit your AppDelegate.m as follows:
|
1 2 3 4 5 6 7 8 9 |
+ #import <GoogleMaps/GoogleMaps.h> <span class="pl-k">@implementation</span> <span class="pl-en">AppDelegate</span> ... - (<span class="pl-c1">BOOL</span>)<span class="pl-en">application</span><span class="pl-en">:</span>(UIApplication *)<span class="pl-smi">application</span> <span class="pl-en">didFinishLaunchingWithOptions</span><span class="pl-en">:</span>(<span class="pl-c1">NSDictionary</span> *)<span class="pl-smi">launchOptions</span> { + [GMSServices <span class="pl-c1">provideAPIKey:</span><span class="pl-s"><span class="pl-pds">@"</span>_YOUR_API_KEY_<span class="pl-pds">"</span></span>]; <span class="pl-c">// add this line using the api key obtained from Google Console</span> ... |
The [GMSServices provideAPIKey] should be the first call of the method.
Then, do either of the following
- If you are using CocoaPods to manage your dependecies, uncomment the lines related to Google Maps from the
Podfileand runpod install. - If you used React Native link, you may include Google Maps manually as a XCode framework following the instructions from SDK docs -> Install manually. Then, to link this library to the framework, add the following to your
package.jsonand replace theREPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALLwith the relative path from your project root to the directory in which you installed the Google Maps frameworks. You might need to specify a recursive search path by adding a/**at the end of the provided path (e.g. `”./node_modules/react-native-maps/enable-google-maps ‘ios/my-frameworks/GoogleMaps/**'”123456{<span class="pl-s"><span class="pl-pds">"</span>name<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>your-app<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>scripts<span class="pl-pds">"</span></span>: {<span class="pl-s"><span class="pl-pds">"</span>postinstall<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>./node_modules/react-native-maps/enable-google-maps REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL<span class="pl-pds">"</span></span>}}Re-run
npm installoryarnto ensure thepostinstallscript is run. - Import and add
{PROVIDER_GOOGLE}to your JavaScript:12345678<span class="pl-k">import</span> <span class="pl-smi">MapView</span>, { <span class="pl-smi">PROVIDER_GOOGLE</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native-maps<span class="pl-pds">'</span></span>;<span class="pl-k">...</span><span class="pl-k"><</span>MapViewprovider<span class="pl-k">=</span>{<span class="pl-c1">PROVIDER_GOOGLE</span>}style<span class="pl-k">=</span>{<span class="pl-smi">styles</span>.<span class="pl-smi">map</span>}<span class="pl-k">...</span><span class="pl-k">></span>
CODE :
After following the initial configuration steps, the rest of the implementation is quite simple.
Suppose the name of your Component is MyAppRouteComponent then your file would be something like below :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import React from 'react'; import { View, Text, Dimensions, ScrollView, TouchableOpacity, FlatList, ToastAndroid, Alert, PermissionsAndroid, Platform, StyleSheet } from 'react-native'; import FastImage from 'react-native-fast-image'; import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps'; import MapViewDirections from 'react-native-maps-directions'; export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window"); export default class MyAppRouteComponent extends React.Component { render() { return ( <View style={{ flex: 1, height: SCREEN_HEIGHT }} > <MapView provider={PROVIDER_GOOGLE} // remove if not using Google Maps style={[styles.map, { width: SCREEN_WIDTH, height: SCREEN_WIDTH }]} initialRegion={{ latitude: 28.623999, longitude: 77.383707, latitudeDelta: 0.05, longitudeDelta: 0.05, }} > <Marker pinColor={'green'} coordinate={{ latitude: 77.383707, longitude: 77.383707 }} /> <Marker pinColor={'blue'} coordinate={{ latitude: 28.469619, longitude: 77.038272 }} /> { this.state.navigationStarted ? <MapViewDirections origin={{ latitude: 28.469619, longitude: 77.038272 }} destination={{ latitude: 77.383707, longitude: 77.383707 }} apikey={GOOGLE_MAPS_APIKEY} // Replace with your Google Maps Api Key strokeWidth={3} strokeColor="hotpink" /> : null } </MapView> </View> ) } } export const styles = StyleSheet.create({ map: { ...StyleSheet.absoluteFillObject, flex:1 }, }); |
Hope This helps you.
For Map Related further Troubleshooting, Please do read more details over here
Keep coding and Keep Sharing 
References : https://github.com/react-native-community/react-native-maps
https://github.com/bramus/react-native-maps-directions
. . .
is this is with expo or without expo?