<p>This article aims to give knowledge about how to implement <strong><span style="color: #008000;">Google Maps</span></strong> into your react native applications with basic concepts like Rendering a Map with an initial region, Changing map type ,Placing a marker ,<span style="color: #000000;">Get user&#8217;s current Location ,Move to specific position with animation etc.</span></p>
<p>Get <strong><span style="color: #0000ff;">GITHUB</span></strong> code from <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://github.com/arunk7839/ReactNativeMapExample"><strong>HERE</strong></a></span>.</p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="EXQkgQOe0Qg" title="React Native Working With Google Map"><a placeholder href="https://youtu.be/EXQkgQOe0Qg"><img src="https://i.ytimg.com/vi/EXQkgQOe0Qg/hqdefault.jpg" layout="fill" object-fit="cover" alt="React Native Working With Google Map"></a></amp-youtube></p>
<p><strong><span style="color: #0000ff;">Note</span></strong>: In the above video on pressing <span style="color: #008000;"><strong>LOCATE ME</strong></span> button shows your current location.</p>
<ul>
<li>Start a new React Native project. If you don’t know how then read my this <a href="https://c1ctech.com/installing-react-native-on-windows/"><strong>tutorial</strong></a>.</li>
<li>After creating project Open Command Prompt in your system .</li>
<li>Now using command prompt locate your project’s root folder .</li>
</ul>
<h3 style="color: #000080;"><strong>Adding React Native Map to Android</strong></h3>
<ul>
<li>Now install react-native-maps inside your project :</li>
</ul>
<p style="padding-left: 30px;"><span style="color: #0000ff;"><strong>npm install react-native-maps &#8211;save</strong></span></p>
<h3><span style="color: #000080;"><strong>Configure Project for Android devices</strong></span></h3>
<ul>
<li>In your <strong><span style="color: #0000ff;">android/app/build.gradle</span></strong> add:</li>
</ul>
<pre style="padding-left: 30px;"><code>dependencies {
 <span class="pl-k">..</span>.
 implementation(project(<span class="pl-s"><span class="pl-pds">'</span>:react-native-maps<span class="pl-pds">'</span></span>)){
 exclude <span class="pl-c1">group</span>: <span class="pl-s"><span class="pl-pds">'</span>com.google.android.gms<span class="pl-pds">'</span></span>, <span class="pl-c1">module</span>: <span class="pl-s"><span class="pl-pds">'</span>play-services-base<span class="pl-pds">'</span></span>
 exclude <span class="pl-c1">group</span>: <span class="pl-s"><span class="pl-pds">'</span>com.google.android.gms<span class="pl-pds">'</span></span>, <span class="pl-c1">module</span>: <span class="pl-s"><span class="pl-pds">'</span>play-services-maps<span class="pl-pds">'</span></span>
 }
 implementation <span class="pl-s"><span class="pl-pds">'</span>com.google.android.gms:play-services-base:10.0.1<span class="pl-pds">'</span></span>
 implementation <span class="pl-s"><span class="pl-pds">'</span>com.google.android.gms:play-services-maps:10.0.1<span class="pl-pds">'</span></span>
}</code></pre>
<ul>
<li>In your <strong><span style="color: #0000ff;">android/settings.gradle</span></strong> add:</li>
</ul>
<pre style="padding-left: 30px;"><code>include <span class="pl-s"><span class="pl-pds">'</span>:react-native-maps<span class="pl-pds">'</span></span>
project(<span class="pl-s"><span class="pl-pds">'</span>:react-native-maps<span class="pl-pds">'</span></span>)<span class="pl-k">.</span>projectDir <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-k">File</span>(rootProject<span class="pl-k">.</span>projectDir, <span class="pl-s"><span class="pl-pds">'</span>../node_modules/react-native-maps/lib/android<span class="pl-pds">'</span></span>)</code></pre>
<ul>
<li>Specify your <strong><span style="color: #0000ff;">Google Maps API Key</span></strong>:</li>
</ul>
<p style="padding-left: 30px;">Add your API key to your manifest file<strong><span style="color: #0000ff;">(android/app/src/main/AndroidManifest.xml)</span></strong>:</p>
<div class="highlight highlight-text-xml">
<pre style="padding-left: 30px;"><code><;<span class="pl-ent">application</span>>;
 <span class="pl-c"><;!-- You will only need to add this meta-data tag, but make sure it's a child of application -->;</span>
 <;<span class="pl-ent">meta-data</span>
 <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>com.google.android.geo.API_KEY<span class="pl-pds">"</span></span>
 <span class="pl-e">android</span><span class="pl-e">:</span><span class="pl-e">value</span>=<span class="pl-s"><span class="pl-pds">"</span>Your Google maps API Key Here<span class="pl-pds">"</span></span>/>;
<;/<span class="pl-ent">application</span>>;</code></pre>
<ul>
<li>Add <span style="color: #0000ff;"><strong>import com.airbnb.android.react.maps.MapsPackage</strong></span>; and <strong><span style="color: #0000ff;">new MapsPackage()</span></strong> in your <span style="color: #0000ff;"><strong>MainApplication.java </strong></span>:</li>
</ul>
<pre style="padding-left: 30px;"><code>import com.airbnb.android.react.maps.MapsPackage;
...
@Override
 protected List<;ReactPackage>; getPackages() {
 return Arrays.<;ReactPackage>;asList(
 new MainReactPackage(),
 new MapsPackage()
 );
 }
</code></pre>
<h3><span style="color: #000080;"><strong>MapView</strong></span></h3>
<p>This <strong><span style="color: #008000;">MapView</span></strong> component is built so that features on the map (such as Markers, Polygons, etc.) are specified as children of the MapView itself.</p>
<p><strong><span style="color: #0000ff;"><span class="meta import js"><span class="keyword control js">import</span> <span class="variable other module js">MapView</span> <span class="keyword control js">from</span> <span class="string quoted single js"><span class="punctuation definition string begin js">&#8216;</span>react-native-maps<span class="punctuation definition string end js">&#8216;</span></span></span><span class="punctuation terminator statement js">;</span></span></strong></p>
<p>OR</p>
<p><strong><span style="color: #0000ff;"><span class="storage type js">var</span> MapView <span class="keyword operator assignment js">=</span> <span class="meta function-call js"><span class="support function js">require</span><span class="meta js"><span class="punctuation definition begin round js">(</span><span class="string quoted single js"><span class="punctuation definition string begin js">&#8216;</span>react-native-maps<span class="punctuation definition string end js">&#8216;</span></span><span class="punctuation definition end round js">)</span></span></span><span class="punctuation terminator statement js">;</span></span></strong></p>
<p> ;</p>
<h3><strong><span style="color: #000080;">Rendering a Map with an initial region</span></strong></h3>
<p>In the below code :</p>
<p><strong><span style="color: #008000;">latitude</span></strong> , <span style="color: #008000;"><strong>longitude</strong></span> : refers to a specific position or point.</p>
<p><strong><span style="color: #008000;">latitudeDelta</span></strong> , <span style="color: #008000;"><strong>longitudeDelta</strong></span> : refers to the area around the specific position.</p>
<p><span style="color: #008000;"><strong>initialRegion</strong></span> : sets the map region on initialization. Cannot accommodate updates.</p>
<p><span style="color: #008000;"><strong class="markup--strong markup--li-strong">region</strong></span>  :  able to take location updates from your application and re-render map accordingly.</p>
<pre><code>state = {

focusedLocation: {
latitude: 37.7900352,
longitude: -122.4013726,
latitudeDelta: 0.0122,
longitudeDelta:
Dimensions.get(<strong>"window"</strong>).width /
Dimensions.get(<strong>"window"</strong>).height *
0.0122
}

}

render() {

<strong>return </strong>(
<;View style={styles.container}>;
<;MapView
initialRegion={<strong>this</strong>.state.focusedLocation}
style={styles.map}
>
<;/MapView>;

<;/View>;
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1
},
map: {
width: <strong>"100%"</strong>,
height: <strong>"100%"
</strong>}
});</code></pre>
<p><strong>Run your project and congratulations if you see a map displaying on your device.</strong></p>
<p><img class="wp-image-579 aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/06/standard-576x1024.png" alt="" width="419" height="745" /></p>
<h3><span style="color: #000080;"><strong>Changing Map Type</strong></span></h3>
<p>You can move to any kind of map by defining <span style="color: #008000;"><strong>mapType</strong></span> prop as :</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p>&#8211; <strong><span style="color: #008000;">standard</span></strong>: standard road map (default)<br />
&#8211; <strong><span style="color: #008000;">none</span></strong>: no map<br />
&#8211; <strong><span style="color: #008000;">satellite</span></strong>: satellite view<br />
&#8211; <strong><span style="color: #008000;">hybrid</span></strong>: satellite view with roads and points of interest overlayed<br />
&#8211; <strong><span style="color: #008000;">terrain</span></strong>: (Android only) topographic view<br />
&#8211; <span style="color: #008000;"><strong>mutedStandard</strong></span>: more subtle, makes markers/lines pop more (iOS 11.0+ only)</p>
<p><img class="alignnone size-medium wp-image-579" src="https://c1ctech.com/wp-content/uploads/2018/06/standard-169x300.png" alt="" width="169" height="300" /> <img class="alignnone size-medium wp-image-582" src="https://c1ctech.com/wp-content/uploads/2018/06/satellite-169x300.png" alt="" width="169" height="300" /></p>
<p><img class="alignnone size-medium wp-image-580" src="https://c1ctech.com/wp-content/uploads/2018/06/hybrid-169x300.png" alt="" width="169" height="300" /> <img class="alignnone size-medium wp-image-581" src="https://c1ctech.com/wp-content/uploads/2018/06/terrain-169x300.png" alt="" width="169" height="300" /></p>
<h3><strong><span style="color: #000080;">Placing a Marker</span></strong></h3>
<p>You can place a marker on the map by using following code:</p>
<pre><code><;MapView.Marker coordinate={ {latitude: 37.7900352,longitude: -122.4013726} }
title = "title"
description = "description"
pinColor = "blue"
image = {require("./assets/custum_icon.png")} />;</code></pre>
<p><span style="color: #008000;"><strong>coordinate</strong></span> : The coordinate for the marker.</p>
<p><img class="aligncenter wp-image-584 " src="https://c1ctech.com/wp-content/uploads/2018/06/map_icon-576x1024.png" alt="" width="411" height="731" /></p>
<p> ;</p>
<p><strong><span style="color: #008000;">title</span></strong> : The title of the marker. This is only used if the component has no children that are a <;<span style="color: #008000;"><strong>Callout</strong></span> />;, in which case the default callout behavior will be used, which will show both the <span style="color: #008000;"><strong>title</strong></span> and the <strong><span style="color: #008000;">description</span></strong>, if provided.</p>
<p><strong><span style="color: #008000;">description</span></strong> : The description of the marker. This is only used if the component has no children that are a <;<strong><span style="color: #008000;">Callout</span></strong> />;, in which case the default callout behavior will be used, which will show both the <strong><span style="color: #008000;">title</span></strong> and the <span style="color: #008000;"><strong>description</strong></span>, if provided.</p>
<p><img class="wp-image-586 aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/06/marker_title_decp-576x1024.png" alt="" width="442" height="786" /></p>
<p> ;</p>
<p><strong><span style="color: #008000;">pinColor</span></strong> : If no custom marker view or custom image is provided, the platform default pin will be used, which can be customized by this color. Ignored if a custom marker is being used.</p>
<p><img class="aligncenter wp-image-585 " src="https://c1ctech.com/wp-content/uploads/2018/06/marker_color-576x1024.png" alt="" width="430" height="764" /></p>
<p> ;</p>
<p><strong><span style="color: #008000;">image</span></strong> : A custom image to be used as the marker&#8217;s icon. Only local image resources are allowed to be used.</p>
<p><img class="aligncenter wp-image-583 " src="https://c1ctech.com/wp-content/uploads/2018/06/custum_image-576x1024.png" alt="" width="442" height="785" /></p>
</div>
<p> ;</p>
<h3><span style="color: #000080;"><strong>Get User&#8217;s current Location</strong></span></h3>
<p>The <strong><span style="color: #0000ff;">navigator geolocation property</span></strong>(navigator.geolocation) returns a Geolocation object that can be used to locate the user&#8217;s position.</p>
<p>The <strong><span style="color: #008000;">getCurrentPosition</span></strong>() method is used to return the user&#8217;s position.</p>
<pre><code>state = {
 
 focusedLocation: {
 latitude: 37.7900352,
 longitude: -122.4013726,
 latitudeDelta: 0.0122,
 longitudeDelta:
 Dimensions.get("window").width /
 Dimensions.get("window").height *
 0.0122
 }
 
}

navigator.geolocation.getCurrentPosition(pos =>; {
this.setState(prevState =>; {
 return {
 focusedLocation: {
 ...prevState.focusedLocation,
 latitude: pos.coords.latitude,
 longitude: pos.coords.longitude }
 
 };
 });
},
err =>; {
console.log(err);
alert("Fetching the Position failed");
})</code></pre>
<h3><strong><span style="color: #000080;">Move to specific Position With Animation</span></strong></h3>
<p><strong><span style="color: #008000;">onPress</span></strong> : Callback that is called when user taps on the map. It returns an object (with property coordinate and position )and we can access event data by using nativeEvent object.</p>
<p><strong><span style="color: #008000;">animateToRegion</span></strong> : this method is used when we want to animate at specific position with animation.We pass region and duration as two arguments.</p>
<pre><code>state = {

 focusedLocation: {
 latitude: 37.7900352,
 longitude: -122.4013726,
 latitudeDelta: 0.0122,
 longitudeDelta:
 Dimensions.get("window").width /
 Dimensions.get("window").height *
 0.0122
 }
 
}
<;MapView
initialRegion={this.state.focusedLocation}
region={!this.state.locationChosen ? this.state.focusedLocation : null}
style={styles.map}
onPress={this.pickLocationHandler}
ref={ref =>; this.map = ref}
>


pickLocationHandler = event =>; {
 const coords = event.nativeEvent.coordinate;
 this.map.animateToRegion({
 ...this.state.focusedLocation,
 latitude: coords.latitude,
 longitude: coords.longitude
 });
 this.setState(prevState =>; {
 return {
 focusedLocation: {
 ...prevState.focusedLocation,
 latitude: coords.latitude,
 longitude: coords.longitude
 }
 };
 });

};</code></pre>
<h3><strong><span style="color: #000080;">Complete Code:</span></strong></h3>
<pre><code>import React, { Component } from "react";
import {
 View,
 Image,
 Button,
 StyleSheet,
 Text,
 Dimensions
} from "react-native";
import MapView from "react-native-maps";

export default class App extends Component {


 state = {

 focusedLocation: {
 latitude: 37.7900352,
 longitude: -122.4013726,
 latitudeDelta: 0.0122,
 longitudeDelta:
 Dimensions.get("window").width /
 Dimensions.get("window").height *
 0.0122
 },
 locationChosen: false
 }

 pickLocationHandler = event =>; {
 const coords = event.nativeEvent.coordinate;
 this.map.animateToRegion({
 ...this.state.focusedLocation,
 latitude: coords.latitude,
 longitude: coords.longitude
 });
 this.setState(prevState =>; {
 return {
 focusedLocation: {
 ...prevState.focusedLocation,
 latitude: coords.latitude,
 longitude: coords.longitude
 },
 locationChosen: true
 };
 });

 };

 getLocationHandler = () =>; {
 navigator.geolocation.getCurrentPosition(pos =>; {
 const coordsEvent = {
 nativeEvent: {
 coordinate: {
 latitude: pos.coords.latitude,
 longitude: pos.coords.longitude
 }
 }
 };
 this.pickLocationHandler(coordsEvent);
 },
 err =>; {
 console.log(err);
 alert("Fetching the Position failed, please pick one manually!");
 })
 }

 render() {
 let marker = null;

 if (this.state.locationChosen) {
 marker = <;MapView.Marker coordinate={this.state.focusedLocation} />;;
 }

 return (
 <;View style={styles.container}>;
 <;MapView
 initialRegion={this.state.focusedLocation}
 region={!this.state.locationChosen ? this.state.focusedLocation : null}
 style={styles.map}
 onPress={this.pickLocationHandler}
 ref={ref =>; this.map = ref}
 >;
 {marker}
 <;/MapView>;
 <;View style={styles.button}>;
 <;Button title="Locate Me" onPress={this.getLocationHandler} />;
 <;/View>;
 <;/View>;
 );
 }
}

const styles = StyleSheet.create({
 container: {
 width: "100%",
 alignItems: "center"
 },
 map: {
 width: "100%",
 height: 600
 },
 button: {
 margin: 8
 }
});</code></pre>