DEV Community

Rishikesh Vedpathak
Rishikesh Vedpathak

Posted on • Originally published at Medium on

React Native Map with real time location selection for Android

React Native Map with real time location selection for Android

These days almost every mobile app needs the map integration for a purpose. React Native gives a great ability to serve this purpose easily. Today we will see how to integrate google map in and how to use google map platform https://maps.googleapis.com to get the real time location by moving around the map view.

Create new project using react-native-cli

First thing you need to have react-native-cli installed globally on your development machine. You can install it by using npm command :

**npm install -g react-native-cli**
Enter fullscreen mode Exit fullscreen mode

After installing react-native-cli create a new project using command:

**react-native init ReactNativeMapView**
Enter fullscreen mode Exit fullscreen mode

This will generate a boilerplate for you with a some pre-configured dependencies. Here are the dependencies at the time of building this project:

**"react": "16.8.3",  
"react-native": "0.59.5"**
Enter fullscreen mode Exit fullscreen mode

You can run your app using react-native run-android , this will display below output on your device.

React native initial device output

Install and configure react-native-maps

Now let’s install react-native-maps using npm command: npm install react-native-maps --save. The library ships with platform native code that needs to be compiled together with React Native. This requires you to configure your build tools. The detailed installation instructions are given here, we will do the setup by using react native link. Run react-native link react-native-maps, this will link the package with our native app(for both Android and iOS). You should the below output on the command line,

Command line output after executing 'react-native link react-native-maps'

Add permissions for map view in our app

Before writing code to display map in our app, we need to get make sure that the required permissions are configured and permitted by the user. To do that add below set of permissions in android/app/src/main/AndroidManifest.xml file.

\<uses-permission android:name="android.permission.SYSTEM\_ALERT\_WINDOW" /\>

\<uses-permission android:name="android.permission.ACCESS\_FINE\_LOCATION" /\>
Enter fullscreen mode Exit fullscreen mode

Also, we need to add add google’s Geo-location API key. Generate your own API key from

Geo-location APIs | Google Maps Platform | Google Cloud

Add below line of code in the same file inside <application> tag at the end.

\<meta-data
android:name="com.google.android.geo.API\_KEY"
android:value="\<\<YOUR API KEY GOES HERE\>\>"/\>
Enter fullscreen mode Exit fullscreen mode

Write a code to display map view

Now it’s time to write some code to display the real time map view in our app.

constructor(props) {
 super(props);
 this.state = {
 loading: true,
 region: {
 latitude: 10,
 longitude: 10,
 latitudeDelta: 0.001,
 longitudeDelta: 0.001
 }
 };
}

render() {
 return (
\<MapView
 style={styles.map}
 initialRegion={this.state.region}
 showsUserLocation={true}
 onMapReady={this.onMapReady}
 onRegionChangeComplete={this.onRegionChange}\>

\<MapView.Marker
 coordinate={{ "latitude": this.state.region.latitude, 
 "longitude": this.state.region.longitude }}
 title={"Your Location"}
 draggable /\>

\</MapView\>);
}
Enter fullscreen mode Exit fullscreen mode

Above code will display a simple map view as shown below,

Add custom marker using font

Many times we see a center positioned icon on the map, which is fixed at the center and we see the map moved around it. To achieve this we will need to add a custom marker using icon or an image. Here we will show icon as a marker and to do so we need to configure and add font. Follow below steps to add fontawesome fonts,

Setp 1: Download fontawesome-webfont.ttf file and rename the file to fontawesome.ttf.

Step 2: create /assets/fonts/ directory in your project directory at root level.

Step 3: paste fontawesome.ttf file to /assets/fonts/

Step 4: add below code to your package.json file.

"rnpm": {
 "assets": [
 "./assets/fonts"
 ]
}
Enter fullscreen mode Exit fullscreen mode

Step 5: run react-native link.

Now that we have fonts configured, we can add a font as a marker.

\<View\>
 \<MapView
 initialRegion={this.state.region}
 showsUserLocation={true}
 \>
 \</MapView\>

\<View style={styles.mapMarkerContainer}\>
 \<Text style={{ fontFamily: 'fontawesome', fontSize: 42, color: 
 "#ad1f1f" }}\>&#xf041;\</Text\>
 \</View\>
 \</View\>
\</view\>
Enter fullscreen mode Exit fullscreen mode

This will display the output as below,

Get location details from the map

We can get the location details using google’s map API. All we need to provide is latitude, longitude and API key to the https://maps.googleapis.com.

Current latitude and longitude can be captured by using onRegionChangeComplete prop method provided by MapView.

See below final output with live real time location selection using react-native-maps,

Conclusion

We have successfully created a react native app which can capture and display user’s current location on the map. You can find the final code in the GitHub repo,

RishikeshVedpathak/ReactNativeMapView

I hope this will help you to understand and encourage you to freely use google’s map API with react native. Please feel free to give feedback and suggestions!

And more...

  • Check Hybrowlabs for React app development services.

Top comments (3)

Collapse
 
kris profile image
0xAirdropfarmer

Thanks for this informative article. Short and easy to understand. Appreciate the guidance on setup and integration of React Native Geolocation for React Native app on Android platform. Will look forward to its integration on iOS platform as well. Great for the beginners. Cheers!

Collapse
 
hugoroam profile image
HugoRoam

@rishikeshvedpathak maybe instead of using Google's Geolocation api, you can use Roam.ai's Location SDK? This will give you more accurate locations!

Collapse
 
rishikeshvedpathak profile image
Rishikesh Vedpathak

Thanks for your suggestion @hugoroam , I will consider using it.