Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
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.
Now, you need to do some manual changes in your android and ios directories respectively.
Let’s Start with the Android configuration first.
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
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
ios
If you want to enable Google Maps on iOS, obtain the Google API key and edit your AppDelegate.m as follows:
AppDelegate.m
The [GMSServices provideAPIKey] should be the first call of the method.
[GMSServices provideAPIKey]
Then, do either of the following
Podfile
pod install
package.json
REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL
/**
Re-run npm install or yarn to ensure the postinstall script is run.
npm install
yarn
postinstall
{PROVIDER_GOOGLE}
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
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
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.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
Name
Email
Subject
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.