This article will provide a detailed guide on Google Maps integration into a React Native application. It will help you set up and deploy Google Maps to display maps and mark locations. Now, let’s follow the below steps to integrate Google Maps into a React Native application.

Step 1: Set up the environment for Google Maps Integration

Before you begin, ensure you have properly installed and configured the environment for developing a React Native application. You will need:
  • Node.js (along with npm or yarn for package management).
  • React Native CLI or Expo CLI.
  • A Google Cloud account to obtain an API Key for Google Maps.

1. Create a React Native project

If you don’t have a React Native project yet, create a new project using one of the following methods:
  • Using React Native CLI:
npx react-native init GGMap
cd GGMap

2. Create a Google Cloud account and obtain the API Key for Maps integration

  1. Go to Google Cloud Console.
  2. Create a new project or use an existing one.
  3. Enable the Google Maps SDK for Android and iOS.
    • Go to API & Services > Library và tìm Maps SDK for Android và Maps SDK for iOS. Enable both operating systems.
  4. Obtain the API Key:
    • Go to API & Services > Credentials, click Create Credentials, and select API Key.

Step 2: Install the Google Maps library for React Native

React Native does not support Google Maps by default. Therefore, you need to install a supporting library, typically react-native-maps.

1. Install react-native-maps library

Run the following command to install the library:
  • With React Native CLI:
```bash
npm install react-native-maps or yarn add react-native-maps
```

2. Android configuration

Add your API Key to AndroidManifest.xml: 
<application>
  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_GOOGLE_MAPS_API_KEY" />
</application>

3. iOS configuaration

  1. Open ios/MyApp/AppDelegate.m file and add your API Key in didFinishLaunchingWithOptions:

#import <GoogleMaps/GoogleMaps.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"GGmap";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  [GMSServices provideAPIKey:@"YOUR_GOOGLE_MAPS_API_KEY"];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
  1. Open ios/Podfile and add the following snippets:
rn_maps_path = '../node_modules/react-native-maps'
pod 'react-native-google-maps', :path => rn_maps_path
  1. Run pod install command in order to install the dependency:

    cd ios && pod install

Step 3: Display Google Maps in your application

Once the configuration is complete, you can start adding the map to the application.

In App.js file, import MapView from react-native-maps and display the map:


    import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

export default function App() {
  return (
    <View style={styles.container}>
     <MapView
       provider={PROVIDER_GOOGLE} 
       style={styles.map}
       region={{
         latitude: 37.78825,
         longitude: -122.4324,
         latitudeDelta: 0.015,
         longitudeDelta: 0.0121,
       }}
     >
     </MapView>
   </View>
  );
}

const styles = StyleSheet.create({
 container: {
   ...StyleSheet.absoluteFillObject,
   height: 400,
   width: 400,
   justifyContent: 'flex-end',
   alignItems: 'center',
 },
 map: {
   ...StyleSheet.absoluteFillObject,
 },
});

That’s all the steps for integrating Google Maps into your application with Reat Native. I believe you can easily implement them by reading this article carefully. If you need someone to implement your project related to Google Maps, let’s contact us and get a quotation. We are always ready to be your partner!