Google Map Integration Into React- Native Project on Android

In this post, we’ll learn how to integrate Google Map in React Native Project on Android.

Why Integrate Google Map?

Google Maps is a Web-based service that provides detailed information about geographical regions and sites around the world. In addition to conventional road maps, Google Maps offers aerial and satellite views of many places.

In today’s scenario, many Applications like Uber, Ola, etc. Apps use Google Maps for navigation because it helps a user to use many google Maps services through an application. for example, the user can navigate through a map and book a ride for the location he wants to go to.

Steps of Integration

1. Install react-native-maps package
2. Configuration on Android
3. Create a Google Maps API Key
4. Specify the Google Maps API Key
5. Build the app on Android

Step 1. Install react-native-maps package

For Using Map Component Install the library from npm:

npm install react-native-maps --save-exact

Step 2. Configuration on Android

Ensure your build files match the following requirements:

If you do not have project-wide properties defined and have a different play-services version than the one included in this library, use the following instead (switch 17.0.0 and/or 17.2.1 for the desired versions):

• add the google-services as a dependency inside your /android/app/build.gradle file.

dependencies {
   ...
   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:17.2.1'
   implementation 'com.google.android.gms:play-services-maps:17.0.0'
}

Step 3. Create a Google Maps API Key

The actual map implementation depends on the platform. On Android, one has to use Google Maps, which in turn requires you to obtain an API key for the Android SDK.

WARNING: Before you can start using the Google Maps Platform APIs and SDKs, you must sign up and create a billing account!

if you do not create a Billing account you are only able to use limited Google Maps Services.

To create an API key:

1. Go to the Google Maps Platform > Credentials page. Go to the Credentials page

create a project or select an already created project

2. Now click on Create Credentials

Now click on API Key Its generate A API key
The new API key is listed on the Credentials page under API keys.
(Remember to restrict the API key before using it in production.)

Ensure also that the relevant Google APIs have been enabled for your project from the URLs below:

• Google Maps SDK Android
• Places API
• Google Maps SDK iOS (if required)

you can enable API services as you need

Step 4. Specify the Google Maps API Key

• Add your API key to your manifest file android/app/src/main/AndroidManifest.xml :

<application>
   <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/>
   <!-- You will also only need to add this uses-library tag -->
   <uses-library android:name="org.apache.http.legacy" android:required="false"/>
</application>

Step 5 . Build the app on Android

import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView from 'react-native-maps';
import { Marker } from 'react-native-maps';
const  Googlemap =()=>{
return (
<View style={styles.MainContainer}>
<MapView
style={styles.mapStyle}
showsUserLocation={true}
zoomEnabled={true}
zoomControlEnabled={true}
initialRegion={{
latitude: 28.5995001,
longitude: 77.3315623,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
</MapView>
</View>
);
}
const styles = StyleSheet.create({
MainContainer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'flex-end',
},
mapStyle: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
export default Googlemap

OUTPUT:

you can check out the GitHub repo of react-native-map and you will find many more component APIs of react-native maps: https://github.com/react-native-maps/react-native-maps#component-api

If you enjoyed this article, share it with your friends and colleagues!