React Native with Google Maps

Step 1: Set up React Native application

Install the React Native command line interface on visual studio by running: npm install -g react-native-cli. Create your project by simply using the following command: react-native init ReactNativeMaps.

Try react-native run-ios or react-native run-android now. You should not have any problems doing so.

Step 2: Add and Link react-native-maps package

Here is how to install react-native-map: npm install --save react-native-maps. Then, link it with your native applications: react-native link react-native-maps.

Step 3: Set up Apple Maps (iOS)

Setting them up separately by the platform will make things easier, so let's start with iOS first. To integrate Google Maps, we will first verify that Apple Maps is working properly. Your current rendering component should have the following code where you want your MapView to be rendered.

import MapView from 'react-native-maps'

You can also try this code with Online Javascript Compiler

Run Code

export default class App extends Component<Props> {  render() {  return (<MapView style={{flex: 1}}   region={{latitude: 43.882004, longitude: 75.582748,  latitudeDelta: 0.0932, longitudeDelta: 0.0431 }} showsUserLocation={true} /> );}}

You can also try this code with Online Javascript Compiler

Run Code

Specify the appropriate longitude and latitude for any location you wish to test. Adding the showUserLocation property to the MapView component enabled the user location, as you can see. Your location is shown on the device if you are running the application.

Also see,  React Native Reanimated  

Step 4: Install 'GoogleMaps' package and Cocoapods (iOS)

  In order to use Google Maps on iOS, we have to install the SDK. A CocoaPods package should be installed. Install it with sudo gem install cocoapods if you have never used it before.

In order to specify the dependencies of your iOS application, you need to create a Podfile. In your React Native app, navigate to the iOS/ folder, and then run pod init or touch Podfile. The result should look like this:  

# platform :ios, '9.0'
target 'ReactNativeMaps' do
# Pods for ReactNativeMaps
pod 'GoogleMaps'
end

You can also try this code with Online Javascript Compiler

Run Code

Pod GoogleMaps has been added and now needs to be installed, as you can see. To install it, run pod install from the iOS folder. You will probably receive an error when trying to run it right now:  

It's all right, we'll do what it wants. Open the Xcode workspace now. From node_modules/, navigate to the AirGoogleMaps folder and make sure it is at the top of your XCode project. You can try building your Xcode project again if you are having problems. You should add HAVE_GOOGLE_MAPS=1 Preprocessor Macro to Build Settings.

Step 5: Get the Google Maps API key and Run iOS app.

We now need to generate an API key for Google Maps.

The API key should be copied and added to the AppDelegate.m file like below.

#import <GoogleMaps/GoogleMaps.h>
[GMSServicesh provideAPIKey:@"YOUR_API_KEY"]

You can also try this code with Online Javascript Compiler

Run Code

Using Google Maps can now be requested by your MapView component.

Step 6: Let's try Android now.

Let's now quit Xcode and just run react-native run-android. If you get the same message:

check your android/app/build.gradle file. And replace this:

compile project(':react-native-maps')

You can also try this code with Online Javascript Compiler

Run Code

with this:

implementation(project(':react-native-maps')){        exclude group: 'com.google.android.gms', module: 'play-services-base'        exclude group: 'com.google.android.gms', module: 'play-services-maps'    }implementation 'com.google.android.gms:play-services-base:12.0.0'implementation 'com.google.android.gms:play-services-maps:12.0.0'

You can also try this code with Online Javascript Compiler

Run Code

 Also, be sure to add the API_KEY to the AndroidManifest.xml file.

<application>   <meta-data      android:name="com.google.android.geo.API_KEY"      android:value="YOUR_API_KEY"/></application>

You can now run your app on both platforms.

Frequently Asked Questions

What Is the Name of API for Google Maps in React Native?

It is google-maps-react.

Is Google Maps supported for both iOS and Android?

Yes, it is supported for both iOS and Android.

What are the Prerequisites?

• Node.js installed locally.
• Familiarity with the React JavaScript framework.
• A Google Maps JavasScript API Key.

Conclusion

In this tutorial, we will show you how to integrate Google Map with your React Native application. With this knowledge, you will be able to build custom features on top of the react-native-maps library. These lessons can be used to create a variety of applications, including taxi services, restaurant finders, delivery apps, and many others. In the React Native ecosystem, react-native-maps make integrating maps easy and is an essential library.  

Check out this link if you want to explore more about React.

Refer to the links problems, top 100 SQL problems, resources, and mock tests to enhance your knowledge.

If you are preparing for the upcoming Campus Placements, don't worry. Coding Ninjas has your back. Visit this data structure link for cracking the best product companies.