Today we’re going to draw directions route on a map in React Native, showcasing the path between two different locations. We’re going to make use of which is a powerful library, allowing us to draw polylines between multiple coordinates. We are also going to use Google Directions API, in order to fetch precise directions routes between two coordinates. react-native-maps It is important to note that the react-native-maps library as of the time of this writing only officially supports the polyline module on the latest React Native version due to the increasing changes in the React Native ecosystem that are not easy to keep up with. Installation Let’s install and configure this library. Depending on your preferred package manager, simply run: npm install react-native-maps --save-exact or yarn add react-native-maps -E Pro Tip: The -E flag installs the exact latest version of this library Setup iOS cd ios
pod install Get a Google API key from your Google Console. You can learn how to obtain the Google API Key step by step in our tutorial. Once you have the API key, edit your file: User Location AppDelegate.m + # <GoogleMaps/GoogleMaps.h>

@implementation AppDelegate
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
+  [GMSServices provideAPIKey:@ ]; ... import "_YOUR_API_KEY_" // add this line using the api key obtained from Google Console Add the following to your above the use_native_modules! function and run pod install in the folder: Podfile ios # React Native Maps dependencies
rn_maps_path = pod , : rn_maps_path
pod pod '../node_modules/react-native-maps' 'react-native-google-maps' => path 'GoogleMaps' 'Google-Maps-iOS-Utils' Android If you’ve defined (recommended!) in your root build.gradle, this library will detect the presence of the following properties: project-wide properties buildscript {...}
allprojects {...} ext {
    compileSdkVersion   = xxx
    targetSdkVersion    = xxx
    buildToolsVersion   = minSdkVersion       = xxx
    supportLibVersion   = playServicesVersion = androidMapsUtilsVersion = } /**
 + Project-wide Gradle configuration properties
 */ "xxx" "xxx" "17.0.0" // or get latest version "xxx" or you could do buildscript {
    ext {
        buildToolsVersion = minSdkVersion = xxx
        compileSdkVersion = xxx
        targetSdkVersion = xxx
        supportLibVersion = playServicesVersion = androidMapsUtilsVersion = }
}
... "xxx" "xxx" "17.0.0" // or find latest version "xxx" If you do have defined and have a different play-services version than the one included in this library, use the following instead (switch 17.0.0 and/or 17.2.1 for the desired versions): not project-wide properties ...
dependencies {
   ...
   implementation(project( )){
       exclude group: , : exclude group: , : }
   implementation implementation } ':react-native-maps' 'com.google.android.gms' module 'play-services-base' 'com.google.android.gms' module 'play-services-maps' 'com.google.android.gms:play-services-base:17.2.1' 'com.google.android.gms:play-services-maps:17.0.0' Finally, you have to add your already retrieved Google API Key to the : AndroidManifest.xml <application> <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/>
  
   
   <uses-library android:name="org.apache.http.legacy" android:required="false"/>
</application>  Usage The basic usage of this library is as follows: React ; {StyleSheet, View, Dimensions} ; MapView ; App = { ( <MapView
        style={styles.maps}
        initialRegion={{
          latitude: 48.864716,
          longitude: 2.349014,
          latitudeDelta: 0.0622,
          longitudeDelta: 0.0121,
        }}/>
    </View> /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */ import from 'react' import from 'react-native' import from 'react-native-maps' const => () return < = > View style {styles.container} );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  maps: {
    width: Dimensions.get('screen').width,
    height: Dimensions.get('screen').height,
  },
});

export default App; This snippet of code renders a basic map that centers on Paris, France. It’s just the bare map as we can see below but we will add the functionality to render a line showing a direction between two locations. To achieve the goal of this article, we have to take a look at an element named provided by which draws the directions route between two points on the map. Polyline, react-native-maps App = { [coordinates] = useState([
    { : , : ,
    },
    { : , : ,
    },
  ]); ( <MapView
        style={styles.maps}
        initialRegion={{
          latitude: coordinates[0].latitude, 
          longitude: coordinates[0].longitude,
          latitudeDelta: 0.0622,
          longitudeDelta: 0.0121,
        }}>
        <Marker coordinate={coordinates[0]} />
        <Marker coordinate={coordinates[1]} />
        <Polyline
          coordinates={coordinates}
          strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
          strokeColors={['#7F0000']}
          strokeWidth={6}
        />
      </MapView>
    </View>
  );
}; const => () const latitude 48.8587741 longitude 2.2069771 latitude 48.8323785 longitude 2.3361663 return < = > View style {styles.container} As we can see in the screenshot below it just displays a straight line between the two markers on the map and this is not helpful for our purpose because it does not show us the path between the two locations. To solve this issue, we have to use an external library react-native-maps-directions to help us draw the correct directions route between our two desired locations. This library makes use the of the , which is a REST endpoint provided by Google, which you can query to get the directions routes between two coordinates with a simple HTTP call. Google Directions API App = { [coordinates] = useState([
    { : , : ,
    },
    { : , : ,
    },
  ]); ( <MapView
        style={styles.maps}
        initialRegion={{
          latitude: coordinates[0].latitude,
          longitude: coordinates[0].longitude,
          latitudeDelta: 0.0622,
          longitudeDelta: 0.0121,
        }}>
        <MapViewDirections
          origin={coordinates[0]}
          destination={coordinates[1]}
          apikey={GOOGLE_API_KEY} // insert your API Key here
          strokeWidth={4}
          strokeColor="#111111"
        />
        <Marker coordinate={coordinates[0]} />
        <Marker coordinate={coordinates[1]} />
      </MapView>
    </View>
  );
}; const => () const latitude 48.8587741 longitude 2.2069771 latitude 48.8323785 longitude 2.3361663 return < = > View style {styles.container} With that we would have achieved our goal. Conclusion If you have followed closely you would have been able to render directions on a React Native map. But take note that you should enable for the directions to be rendered and if you are testing for Android or if you’re testing for iOS. Directions API Google Maps for Android Google Maps API for iOS We were able to draw the directions route between two given locations on a map in React Native, by using a maps library as well as the Google Directions API endpoint. If you found this React Native tutorial useful, please spread the word by sharing it with your community. Cheers! Previously published at https://www.instamobile.io/react-native-tutorials/react-native-draw-directions-map/

Flow

Apache

Facebook

Fetch

Google

visit more my tutorial

Read My Stories

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

React Native Maps: Irrepleceable Tips On Drawing A Route

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@krissanawat101

RELATED STORIES