Mobile Application Solutions

How to Integrate Maps In React Native?

How to Integrate Maps In React Native

Introduction of React Native Map

React Native Map is the default map feature in iOS and Android. This library is the most used and maintained. The map provides directions of arrival along with a navigation route of your next destination. React native maps can be integrated into Google maps, into Android and iOS devices using map view and marker, where Marker is used to set pins in particular locations using location icons.

Statistics of React Native Map Integration:

  • React Native maps library has more than 96,445 weekly downloads.
  • 4.6 rating out of 5 of this library.
  • 1,10,000 users.
  • 400 contributors.

Component of React Native Map Integration :

  1. <Marker/>
  2. <Mapview/>
  3. <Polygon/>
  4. <Overlay/>
  5. <Heatmap/>
  6. <Geojson/>
  7. <Callout/> 
  8. <Polyline/>
React Native Developer CTA2

Standard Process of React Native Map Integration:

Below are the 10 steps to integrate React native maps into your Android and iOS device.

1. Add Map dependencies in your package.json file:

“react-native”:”0.64.2”.
“react-native-maps”: “0.28.0”.

2. Install React Native Map package:

Run npm i react-native-maps  in the terminal after creating the project.

3. Configuration on iOS:

Run react-native link after react-native-maps in the terminal.
After this you should be able to use this library.

4. POD Files changes:

pod 'GoogleMaps' 
Pod ‘Google-map-ios-utils’’ 
pod 'react-native-maps', path: '.././..’

5. Create a Google Map API Key:

6. Steps to enable the API_KEY:

  • Create new or add your project
  • Go to credentials.
  • Add credentials to your added project
  • Click on Google Maps SDK for iOS.
  • Enable Google Maps SDK.
  • Click on Continue of the generated Popup. After the above steps, we will get the API key. Copy that API key and add it into the APPDelegate.m file.
#import <GoogleMaps/GoogleMaps.h>
[GMSServices provideAPIKey:@’’Google_API_Key”]

7. Import React Native Map into App.js:

import MapView from react-native-maps

8. Creating the map into view:

<View>
<MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        />
</View>

9. App.js file:

import React, { Component } from 'react';
import MapView ,{ PROVIDER_GOOGLE } from react-native-maps;
Const App=()=>(
{
return (
<View>
<MapView
          provider={PROVIDER_GOOGLE}
          style={{flex:1}}
          initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        />
</View>

)}
Export default App;

10. Run on your iOS device:

Run react-native-iOS into the terminal and open the simulator to view output.

Benefits of React Native Map

React Native Map library makes it easy to integrate maps. Using , you can implement different features on Android and iOS. It has many options like adding markers, adding extra API components, track particular location, programmatically changing location, zoom in-out particular location.

Mapview animated to specified region and location. Few things are available only in Android and few things are available in iOS.

React Native Developer CTA1

Conclusion

React Native Map library is useful to integrate maps into Android and iOS. Using this, we can understand how to implement maps and their benefits. We can integrate them in our different react native applications like delivery apps, transport services apps and more on-demand mobile applications.

FAQs

How to Display User Location in React Native Map?

In the Mapview tag, Set the region of user location and declare shows UserLocation true.

What are LatitudeDelta and LongitudeDelta in React Native Maps Library?

Latitude : North-to-south distances are displayed on the map.
Longitude: East-to-west distances are displayed on the map.
The map is styled by React native according to the width and height.

Want to read more Blogs ?

Similar Post

Certified By

OneClick

Got more questions? Chat with our experts or schedule a call back

Bot 13:42
Hi how can i help you?