React Native Google Maps - Adding Google Maps in React Native

Last updated Jan 30, 2025

Now, every smartphone has an app to get the direction to where the user wants to reach. This is supported by Google. In this example we are going to cover how to add Google Maps inside React Native application.

Prior-required learnings

• First of all you need to make your dev system compatible with the environment necessitated for React Native. With this, I mean to say that you have to download specific software like Android studio, Node.js, Visual Studio Code, and others. Check the article ‘How to set up the React Native Development Environment’ to learn the entire process. It is important to note that you have to focus only on the segment of React Native CLI and not on other tools. 

• Secondly, you must learn about building a basic app based on React Native. Integrating the features of Google Maps is only possible if you make an app first and add the components and packages further for embedding the functionalities of Google Maps. In case you are looking for guidance, you can visit the blog and learn the steps. 

• Lastly, you need basic knowledge of the API calling process. In this project, the use of API keys is mandatory. You can find this key in the Androidmanifest.xml file of the app’s root directory. You can consider the meta-data tag to hold the unique API key for this map feature. 

Considered Third-party React Native plugins

You cannot find every component or feature in the React Native framework. You need to import it from other third-party libraries and then use it in your project. Also, you need to know the use of different packages so that you don't end up selecting the wrong plugin. Here, as you can see from image 1 that different packages are stored in the package.json folder of my projects.  These are stored as ‘dependencies’ However, the most important packages used in this current project are the react-native-maps and @react-native-community/geolocation. 

 

 

You have to get two components from react-native-maps. These will be Marker and MapView. On the other hand, you have to get the Geolocation component from the third-party package @react-native-community/geolocation. Also, note that you should work on a React Native framework of version 0.64.3 or the latest version of it to get these packages installed in your system without any error output. 

 

Moreover, you need to execute an additional step in which you have to add navigator.geolocation = require('@react-native-community/geolocation');

Refer to image 2  where you need to add the line in the App.js file of the app directory. This way you can enable the compatibility of the geolocation API of the web browser with that of the app you are building. 

 

 

Getting started with the code snippets

import React, {useState} from 'react'; import {StyleSheet, View, Dimensions} from 'react-native'; import MapView from 'react-native-maps'; import {Marker} from 'react-native-maps'; import Geolocation from '@react-native-community/geolocation';

Here, you have to start with the codebase by importing all the React Native components  from the required packages. As you notice, I have used React, useState, StyleSheet, View, Dimensions, MapView, Marker, and Geolocation  from the respective mentioned packages. 

 

Now, get into a JavaScript statement as mentioned below.

navigator.geolocation = require('@react-native-community/geolocation');

You can refer navigator.geolocation as a property . Now, here, you have to set a value to navigator.geolocation to which I have allotted require('@react-native-community/geolocation'. 

 

You have to use the useState hook to set the initial value of a  newly introduced variable or object. Here, it is the coordinates. Now, you also have to use the setCoordinates  to update the state of coordinates later in the codebase. Refer to the following syntax for the use of useState in this project.

const App = () => {   const [coordinates, setCoordinates] = useState({     latitude: 22.57371753630649,     longitude: 88.4376725968472,   });

Here, I have used the latitude and longitude value: 22.57371753630649 and 88.4376725968472 respectively. You can easily change the latitude and longitude values to get the map location of different regions. 

 

To introduce the MainContainer in which the Google map will show up, you have to use the following syntax.  

return (

Also, here, you can see, I have used styling elements to which you can add different styling parameters in the codebase. 

 

Following this, you have to introduce MapView in your codebase and design it further. Let’s see how you can achieve this.      

style={{           width: Dimensions.get('window').width,           height: Dimensions.get('window').height,         }}         showsUserLocation={true}         zoomEnabled={true}         zoomControlEnabled={true}         initialRegion={{           latitude: coordinates.latitude,           longitude: coordinates.longitude,           latitudeDelta: 0.062,           longitudeDelta: 0.0121,         }}>

You have to use the Dimension component for both width and height to make your app responsive. Later on, you need to enable the showsUserLocation, zoomEnabled, and  zoomControlEnabled. 

Moreover, the initialRegion is used to render the display on the app screen. Here, it will be the latitude and longitude value specified in the codebase. 

 

To get into the styling part of the app, you have to close all the tags ( and ) and start exporting the function App. Here, is how you can achieve this.     

); }; export default App;

 

You can start the styling part with the line: const styles = StyleSheet.create({ and proceed forward with the below-provided syntax. 

MainContainer: {     position: 'absolute',     top: 0,     left: 0,     right: 0,     bottom: 0,     alignItems: 'center',     justifyContent: 'flex-end',   },

This way, you have to style the MainContainer with the parameter position, top, left, right, bottom, alignItems, and justifyContent. 

 

You have to end the coding part by styling the mapStyle using the parameter position, top, left, right and bottom. Consider the following syntax for this code part. 

mapStyle: {     position: 'absolute',     top: 0,     left: 0,     right: 0,     bottom: 0,   }, });

 

It’s time to run the app and close the project with an added milestone achieved to your portfolio as developers. 

 

Running and testing the app

Consider the two command npm install and npx react-native run-android. Pass these two commands simultaneously in your project terminal. As soon as it is done, your emulator will show up on your system screen. Note that, it may take some to bundle the app. So hold on for the period it takes to bundle. 

Your app will show as same as it is shown in image 3. 

 

You can use the +,- buttons located at the bottom of the app to zoom in or zoom out the location you have set.

 

So, you see, how simple is it to add a Google map feature in your React Native app! What you have to do is understand the basic concept of the framework and get into the practice mode