Read More

Map View implementation in React Native

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 :

  • react-native-maps ( Refer here for the official github page of this package)
  • react-native-maps-directions (Refer here for the official github page of this package)

Installation Steps :

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 )

In your module level build.gradle file (path to this file: android–> app–>build.gradle)

Now you need to add Your Google Map API key in your AndroidManifest.xml file

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).

Then run in the ios folder

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:

The [GMSServices provideAPIKey] should be the first call of the method.

Then, do either of the following

  1. If you are using CocoaPods to manage your dependecies, uncomment the lines related to Google Maps from the Podfile and run pod install.
  2. 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 the REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL with 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/**'”

    Re-run npm install or yarn to ensure the postinstall script is run.

  3. Import and add {PROVIDER_GOOGLE} to your JavaScript:

 

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 :

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

 

 

 

 

 

. . .

Comments (2)

Add Your Comment

  • shalini
    hii
    is this is with expo or without expo?
    • anchit
      Hello,
      We have used this without Expo.

      But using Expo as well, the usage would be the same.

      Expo, should not cause you any issues as far as the implementation mentioned above is related.

  • css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close