How to Implement Google Maps in a React Native App

Maps are an important feature in modern mobile applications. They help users discover nearby stores, track delivery locations, find service providers, and navigate to specific destinations.

Google Maps integration in React Native allows developers to display interactive maps, add location markers, show the user’s current location, and build location-based features for Android and iOS applications.

In this tutorial, we will learn how to integrate Google Maps into a React Native CLI application using react-native-maps.

Steps to Implement Google Maps in React Native:

Step 1: Install the Dependencies

Using npm

npm install react-native-maps

Using yarn

yarn add react-native-maps

For iOS, install the CocoaPods dependencies:

cd ios
pod install
cd ..

Step 2: Obtain a Google Maps API Key

Google Maps requires platform-specific API keys generated via the Google Cloud Console. 

1. Log into the console and create or select a project.
2. Navigate to APIs & Services > Library.
3. Enable Maps SDK for Android and Maps SDK for iOS.
4. Go to Credentials, click Create Credentials, and select API Key.
5. Best Practice: Restrict your keys! Restrict the iOS key by bundle identifier and the Android key by package name and SHA-1 fingerprint to prevent unauthorized usage. 

Step 3: Configure Native Platforms

Android Configuration

Open android/app/src/main/AndroidManifest.xml and insert your API key inside the <application> tag:

<application> <!-- Add your Google Maps API Key here --> <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_ANDROID_API_KEY_HERE"/> </application>

Ios Configuration

ios/YourProjectName/AppDelegate.mm (or AppDelegate.swift): 

#import <GoogleMaps/GoogleMaps.h> 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [GMSServices provideAPIKey:@"YOUR_IOS_API_KEY_HERE"]; 

return [super application:application didFinishLaunchingWithOptions:launchOptions]; }

Step 4: Implement the Map Component

Now that the native setup is complete, you can write the React Native code. The <MapView> component behaves like a canvas, and you can place <Marker> components inside it to pinpoint specific coordinates

Here is a clean implementation of a full-screen interactive map:

import React from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
const { width, height } = Dimensions.get('window');

export default function App() {
    // Define the initial region the map will focus on
    const initialRegion = {
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922, // Controls vertical zoom level
        longitudeDelta: 0.0421, // Controls horizontal zoom level
    };
    return (
        <View style={styles.container}>
            <MapView 
                provider={PROVIDER_GOOGLE} // Forces Google Maps on iOS
                style={styles.map}
                initialRegion={initialRegion}
            >
                {/* Custom Marker Pin */}
                <Marker
                    coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
                    title="San Francisco"
                    description="This is our central map marker."
                />
            </MapView>
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    map: {
        width: width,
        height: height, // Map requires explicit dimensions to prevent a blank white screen
    },
});

Conclusion:

Integrating Google Maps into a React Native application makes it easier to build interactive and location-based mobile experiences. By using the react-native-maps library, developers can display maps, add markers, customize the initial map region, and create useful features for Android and iOS applications.

With the basic map implementation in place, you can extend your application with additional features such as current location detection, multiple markers, location search, and route visualization to create a more engaging user experience.

FAQ

1. What is react-native-maps?

react-native-maps is a React Native library that allows developers to display interactive maps in mobile applications. It supports features such as map navigation, location markers, custom map styling, and region-based positioning.

2. Do I need a Google Maps API key to use Google Maps in React Native?

Yes, when using Google Maps as the map provider, you generally need to configure API keys for Android and iOS. You must enable the appropriate Maps SDKs in Google Cloud Console and configure billing if required by Google’s current policies.

3. Can I use Google Maps in both Android and iOS applications?

Yes. The react-native-maps library supports both Android and iOS. However, Google Maps configuration differs between platforms. Android typically uses an API key in AndroidManifest.xml, while iOS requires the appropriate native configuration for Google Maps when using the Google Maps provider.

4. Why is my Google Map displaying a blank screen?

A blank map may result from an invalid API key, disabled Maps SDKs, missing billing configuration, incorrect native setup, or API key restrictions that do not match your application. Also, verify that the map has valid dimensions and that the native dependencies are installed correctly.

5. Can I display multiple markers on a React Native map?

Yes. You can render multiple Marker components inside MapView, each with its own coordinates, title, and description. For dynamic locations, you can generate markers from an array of location objects.

6. Can I customize the appearance of Google Maps in React Native?

Yes. The react-native-maps library supports map styling, custom marker images, different map types, and other configuration options. These features help you align the map interface with your application’s design and functionality.