React Native Google Map

Google map is used to locate an address, navigate, and search location in the mobile devices. The Google Maps shows the location (latitude and longitude) using dot Marker. In the react-native, Google Maps is easily integrated using react-native-maps npm library. To use Google Maps in our application, we need to authenticate the Google Maps API.

1. Create the react-native project

Create the react-native project and install the react-native-maps library using the below command

1. npm install -save react-native-maps  

After successful execution of the above code, it installs the react-native-maps library, which can be seen in package.json file.

2. Generate Google Maps authentication API key from the Google Developer Console

2.1 To use Google Maps in our application, we need to generate and authenticate the Google Maps API key. Login to https://console.developers.google.com/ with your google mail account and create a new project.

2.2 Now, click on API and Services -> Credentials -> Create credentials to create API credentials.

2.3 It will pop up your API key with message API key created.

2.4 To see an overview of your API key, click Google Maps -> Overview.

2.5 Now, go to API Library and select Maps SDK for Android to enable the Map API

3. Open your project_name -> android -> setting.gradle file and add the below code:

1. include ':react-native-maps'  
2. project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')  

4. Again open your project_name ->android -> build.gradle file and add the below code in dependencies block.

1. implementation project(':react-native-maps')  

5. Go to project_name -> android ->app->src->main->java->com->project_name-> MainApplication.java and add the below code:

1. import com.airbnb.android.react.maps.MapsPackage;  
2. ...  
3. new MapsPackage()  

MainApplication.java

1. package com.maps;  
2. import android.app.Application;  
3. import com.facebook.react.ReactApplication;  
4. import com.airbnb.android.react.maps.MapsPackage;  
5. import com.facebook.react.ReactNativeHost;  
6. import com.facebook.react.ReactPackage;  
7. import com.facebook.react.shell.MainReactPackage;  
8. import com.facebook.soloader.SoLoader;  
9. import com.airbnb.android.react.maps.MapsPackage;  
10. import java.util.Arrays;  
11. import java.util.List;  
12.   
13. public class MainApplication extends Application implements ReactApplication {  
14.   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {  
15.     @Override  
16.     public boolean getUseDeveloperSupport() {  
17.       return BuildConfig.DEBUG;  
18.     }  
19.     @Override  
20.     protected List<ReactPackage> getPackages() {  
21.       return Arrays.<ReactPackage>asList(  
22.           new MainReactPackage(),  
23.             new MapsPackage()  
24.       );  
25.     }  
26.     @Override  
27.     protected String getJSMainModuleName() {  
28.       return "index";  
29.     }  
30.   };  
31.   @Override  
32.   public ReactNativeHost getReactNativeHost() {  
33.     return mReactNativeHost;  
34.   }  
35.   @Override  
36.   public void onCreate() {  
37.     super.onCreate();  
38.     SoLoader.init(this, /* native exopackage */ false);  
39.   }  

6. In your project_name -> android -> app -> src -> main ->AndroidManifest.xml file add the below code inside application tag.

1. <meta-data  
2. android:name="com.google.android.geo.API_KEY"  
3. android:value="Your_Google_API_Key"/>  

7. Import the MapView and Marker component from react-native-maps library in App.js file.

MapView: It is used to display the MapView component in the project.

Marker: It is used to show the red round mark to pinpoint the exact location in Google Maps.

App.js

1. import React, { Component } from 'react';  
2. import { StyleSheet, View } from 'react-native';  
3. import MapView from 'react-native-maps';  
4. import { Marker } from 'react-native-maps';  
5.   
6. export default class App extends Component {  
7.   render() {  
8.     return (  
9.       <View style={styles.MainContainer}>  
10.   
11.         <MapView  
12.           style={styles.mapStyle}  
13.           showsUserLocation={false}  
14.           zoomEnabled={true}  
15.           zoomControlEnabled={true}  
16.           initialRegion={{  
17.             latitude: 28.579660,   
18.             longitude: 77.321110,  
19.             latitudeDelta: 0.0922,  
20.             longitudeDelta: 0.0421,  
21.           }}>  
22.   
23.           <Marker  
24.             coordinate={{ latitude: 28.579660, longitude: 77.321110 }}  
25.             title={"JavaTpoint"}  
26.             description={"Java Training Institute"}  
27.           />  
28.         </MapView>  
29.           
30.       </View>  
31.     );  
32.   }  
33. }  
34.   
35. const styles = StyleSheet.create({  
36.   MainContainer: {  
37.     position: 'absolute',  
38.     top: 0,  
39.     left: 0,  
40.     right: 0,  
41.     bottom: 0,  
42.     alignItems: 'center',  
43.     justifyContent: 'flex-end',  
44.   },  
45.   mapStyle: {  
46.     position: 'absolute',  
47.     top: 0,  
48.     left: 0,  
49.     right: 0,  
50.     bottom: 0,  
51.   },  
52. });  

Output: