Integrate Google map in react-native

Naitik Soni
Nov 7 · 2 min read

Begin with and integrate google maps and it’s basic functionality (e.g fetching current location, geocoding, reverse geocoding) in react native app.


Was making a demo and searched for multiple things, installation to complete that. Writing this article so that it can help readers save their time.


  • Setup
  • Request permission runtime
  • Get current location
  • Geocoding and Reverse geocoding

1. Setup

  • Install maps
    npm install react-native-maps --save
  • API key(credential from GCP project) is required for android-maps and Geocoding. Make sure API is enabled for maps-sdk and geocoding feature. Add key to manifest
    <meta-data android:name="com.google.android.geo.API_KEY" android:value="AI*Sy**Qq2*8SA***v*6p*ukm*aCD**"/>
  • Install geocoding module
    npm install --save react-native-geocoding
  • Install geolocation module
    npm install @react-native-community/geolocation --save
  • Add permissions in manifest
    <usespermission android:name="android.permission.ACCESS_FINE_LOCATION" />
  • <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

2. Request permission runtime

  • Import from react
    import { PermissionsAndroid } from 'react-native';
  • then call PermissionsAndroid.request function (see below code snippet)
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION)

if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the location")
} else {
console.log("location permission denied")
}
} catch (err) {
console.warn(err)
}

3. Get current location

  • Import
    import Geolocation from '@react-native-community/geolocation';
  • then call Geolocation.getCurrentPosition function (see below code snippet)
Geolocation.getCurrentPosition(
(position) => {
//success
var lat=position.coords.latitude;
var lng=position.coords.longitude;

//animate camera to retrived location
this.mapView.animateToRegion(this.state.region, 1500);
},
(error) => {
console.error(error);
},
{ enableHighAccuracy: true, timeout: 30000 },
);
  • If enableHighAccuracy is set to true, it will fetch accurate location from GPS otherwise it will fetch approx location from network and wifi state.

4. Geocoding and reverse geocoding

  • Import
    import Geocoder from 'react-native-geocoding';
  • Init Geocoder object with your key in componentDidMount() (anywhere before using it’s methods) by Geocoder.init("AI*Sy**Qq2*8SA***v*6p*ukm*aCD**");
  • then call Geocoder.from(address) function with proper arguments
Geocoder.from("Statue of unity, Gujarat, India")
.then(json => {
var location = json.results[0].geometry.location;
var lat = json.results[0].geometry.location.lat;
var lng = json.results[0].geometry.location.lng;
console.log(location);
})
.catch(error => console.warn(error));

and for reverse geocoding call Geocoder.from(lat, lng) function with proper argument

Geocoder.from(24.252275,73.6651218)
.then(json => {
//json will contain full response
var address = json.results[0].formatted_address;
console.log(address);
})
.catch(error => console.warn(error));

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade