Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Prerequisites
3.
Step 1: Set up React Native application
4.
Step 2: Add and Link react-native-maps package
5.
Step 3: Set up Apple Maps (iOS)
6.
Step 4: Install 'GoogleMaps' package and Cocoapods (iOS)
7.
Step 5: Get the Google Maps API key and Run iOS app.
8.
Step 6: Let's try Android now.
9.
Frequently Asked Questions
9.1.
What Is the Name of API for Google Maps in React Native?
9.2.
Is Google Maps supported for both iOS and Android?
9.3.
What are the Prerequisites?
10.
Conclusion
Last Updated: Mar 27, 2024
Easy

React Native with Google Maps

Author vishal teotia
1 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

The Google Maps service offers a variety of configuration options for its map service. You can provide users with more contextual information by including Google Maps in your application than a street address or set of coordinates.

Nowadays, Google Maps is available in almost all apps. Some mobile apps display the location of their outlets, track users (such as Uber), and display nearby places. Thus, maps play an important role in mobile apps. Let's go step-by-step through integrating Google Maps into a React Native app using the popular React Native Maps package.

The management of an app's codebase is very important for a developer or company. Nowadays, you can develop mobile apps for both iOS and Android using platforms like React Native. In this blog, I will not talk in detail about React and React Native. As a result, we are focusing on more Google Maps integration on iOS and Android.

React Native apps can integrate Google Maps in two ways:

  1. create-react-native-app cli
  2. React-native-cli


React-native-cli is developer-friendly and offers the ability to build native components. However, this means every little part of your application must be configured. In addition, you must use a real device or a simulator for both iOS and Android in order to test your application. During the installation and configuration of various npm packages, you might generate a lot of bugs.

With create-react-native-app, you can use the SDK's built-in modules. This simplifies the process of creating apps. It is not necessary to have a device (not even a simulator) to run and test the apps. Using the expo apps built for Android and iOS, you only need to develop and test the code. When you run npm start, you only need the QR Code generated by your application.


Click on the following link to read further: Hooks in React JS

Prerequisites

You should also have a basic or intermediate understanding of JavaScript, React, and React Native.

What are the necessary components for integrating React Native Maps?

  1. Text Editor or IDE (We are using Visual Studio Code).
  2. Node JS (As always, needed to install packages & other stuff).
  3. react-native (A CLI command-line tool to install React Native onto your system.)
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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'
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} /> );}}

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

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"]

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

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'

 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 problemstop 100 SQL problemsresources, 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.

Previous article
React Native Animations
Next article
React Native working with modals
Live masterclass