Integrate Google map in react-native
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.requestfunction (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.getCurrentPositionfunction (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
enableHighAccuracyis set totrue, 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
Geocoderobject with your key incomponentDidMount()(anywhere before using it’s methods) byGeocoder.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));