React Native Map Example is to integrate the Google Map into your React Native Application. To integrate the Map in our example we will use a very good library called react-native-maps. Which provides MapView component which is very easy to use. So let’s get started.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cliRun the following commands to create a new React Native project
react-native init ProjectNameIf you want to start a new project with a specific React Native version, you can use the --version argument:
react-native init ProjectName --version X.XX.Xreact-native init ProjectName --version react-native@nextThis will make a project structure with an index file named App.js in your project directory.
Installation of Dependency
To use MapView we need to install react-native-maps package. To install this
Open the terminal and jump into your project
1 | cd ProjectName |
Run the following command
1 | npm install react-native-maps --save |
This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-maps.
–save is optional, it is just to update the react-native-maps dependency in your package.json file.
For React Native Version<0.60
Linking of Library
To use react-native-maps library we have to link some dependencies for React Native version<0.60 as RN ).60 brought the auto-linking feature. In order to link the library, you have to run following command
1 | react-native link react-native-maps |
For React Native Version>=0.60
Install Pod File
React Native 0.60+ has auto-linking feature but still we have to install the pod file after the linking of the libraries. So for that run
1 | cd ios && pod install && cd .. |
This is how we have installed the dependency. Now to open the google map in the app we have to get the API key for from Google Developer Console and to do that please follow the below steps.
Generate the API Key
To get the Map API key from the Google Developer console, open Developer console and log in from your Google account.
If you have already created any project you can use that or you can create a new one like this
After creating the project you can see all of your created project a drop-down in the top left corner. Now select the project from the dropdown and goto to the credential section.
You can find the create credential option there.
Hit on the create credential button and it will create an API key to the user in your Map Application
Before we add this API key in our project you have to enable the API which you want to use in your project. For that, you can search for the Map and you will find the Map related API. We will enable Map SDK for Android because we are making this example for the Android. So click on Map SDK for Android and you will found the enable button to enable the Map API for Android.
7. Now after enabling the API key, we have to add this API key to our project’s AndroidManifest.xml file. Just copy the following lines and paste it into your manifest file with your generated API key.
1 2 3 | <meta-data android:name="com.google.android.geo.API_KEY" android:value="Replace this with your API key"/> |
Now Open App.js in any code editor and replace the code with the following code.
Please note that we have used customMapStyle={mapStyle} which is for the custom styling of the map in which you just have to provide the mapStyle JSON which will help you to customize your map. To get the custom style JSON please visit https://mapstyle.withgoogle.com/.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | /*This is an Example of React Native Map*/ import React from 'react'; import { StyleSheet, Text, View , TextInput} from 'react-native'; import MapView, {Marker} from 'react-native-maps'; export default class App extends React.Component { onRegionChange(region) { this.setState({ region }); } render() { var mapStyle=[{"elementType": "geometry", "stylers": [{"color": "#242f3e"}]},{"elementType": "labels.text.fill","stylers": [{"color": "#746855"}]},{"elementType": "labels.text.stroke","stylers": [{"color": "#242f3e"}]},{"featureType": "administrative.locality","elementType": "labels.text.fill","stylers": [{"color": "#d59563"}]},{"featureType": "poi","elementType": "labels.text.fill","stylers": [{"color": "#d59563"}]},{"featureType": "poi.park","elementType": "geometry","stylers": [{"color": "#263c3f"}]},{"featureType": "poi.park","elementType": "labels.text.fill","stylers": [{"color": "#6b9a76"}]},{"featureType": "road","elementType": "geometry","stylers": [{"color": "#38414e"}]},{"featureType": "road","elementType": "geometry.stroke","stylers": [{"color": "#212a37"}]},{"featureType": "road","elementType": "labels.text.fill","stylers": [{"color": "#9ca5b3"}]},{"featureType": "road.highway","elementType": "geometry","stylers": [{"color": "#746855"}]},{"featureType": "road.highway","elementType": "geometry.stroke","stylers": [{"color": "#1f2835"}]},{"featureType": "road.highway","elementType": "labels.text.fill","stylers": [{"color": "#f3d19c"}]},{"featureType": "transit","elementType": "geometry","stylers": [{"color": "#2f3948"}]},{"featureType": "transit.station","elementType": "labels.text.fill","stylers": [{"color": "#d59563"}]},{"featureType": "water","elementType": "geometry","stylers": [{"color": "#17263c"}]},{"featureType": "water","elementType": "labels.text.fill","stylers": [{"color": "#515c6d"}]},{"featureType": "water","elementType": "labels.text.stroke","stylers": [{"color": "#17263c"}]}]; return ( <View style={styles.container}> <MapView style={styles.map} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} customMapStyle={mapStyle} > <Marker draggable coordinate={{ latitude: 37.78825, longitude: -122.4324, }} onDragEnd={(e) => alert(JSON.stringify(e.nativeEvent.coordinate))} title={'Test Marker'} description={'This is a description of the marker'} /> </MapView> </View> ); } } const styles = StyleSheet.create({ container: { position:'absolute', top:0, left:0, right:0, bottom:0, alignItems: 'center', justifyContent: 'flex-end', }, map: { position:'absolute', top:0, left:0, right:0, bottom:0, }, }); |
To Run the React Native App
Open the terminal again and jump into your project using.cd ProjectNamereact-native run-androidreact-native run-ios (macOS only).After running the map example on Android you will see the google map as below
Apple maps will also have the same features as google map has but if you want to keep your cross-platform application align then you have to draw a Google map in the IOS application too.
So to do that you have to add provider={PROVIDER_GOOGLE} prop in the <MapView /> but if you simply add the PROVIDER_GOOGLE in the MapView and run it you will face the following “react-native-maps: AirGooglMaps dir must be added to your Xcode project to support GoogleMaps on iOS” error.
To solve this error we will add AirGooglMaps dir in the Xcode project as suggested by the error itself.
Please follow the following steps for that
1. First of all, open the pod file of the iOS project and add the following line as given in the screenshot
1 | pod 'GoogleMaps' |
2. Now open the terminal, jump into the project and install the pod using
1 | cd ios |
1 | pod install |
3. Now Open the project in the Xcode and find AirGooglrMaps in the node_modules here at node_modules > react-native-maps > lib > ios > AirGooglrMaps.
4. Now drag that folder into your project’s main directory. For example, my project is RNMapExample so I selected AirGooglrMaps and dragged it into the RNMapExample directory in Xcode. After that, it will ask to choose options for adding these files. Please note you must have to select “Copy items if needed” and “Create groups” options.
5. After doing that you can see the additional AirGooglrMaps directory that is what our error said.
6. Now we have to add an additional flag for that first select your project then please select Build Settings after that search for the preprocessor and click <Multiple Values> in front of Preprocessor Macros. Here you will see a popup please click on add sign and it will give you an option to add some value. Please add the following value into that
1 | HAVE_GOOGLE_MAPS=1 |
7. Now open AppDelegate.m file of the mail project and copy following lines as give n the screenshot.
At the top
1 | #import <GoogleMaps/GoogleMaps.h> |
In the starting of the first function
1 | [GMSServices provideAPIKey:@"Your Google API Key"]; |
Please replace “Your Google API Key” with the API key we have generated from the Google Console.
Now we are ready for the Google Map in the iOS 🙂
Please replace the code of App.js with the following code for the Google Map in iOS also. Here we are just adding an addition prop provider={PROVIDER_GOOGLE} in the MapView.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | /*This is an Example of React Native Map*/ import React from 'react'; import { StyleSheet, Text, View , TextInput} from 'react-native'; import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps'; export default class App extends React.Component { onRegionChange(region) { this.setState({ region }); } render() { var mapStyle=[{"elementType": "geometry", "stylers": [{"color": "#242f3e"}]},{"elementType": "labels.text.fill","stylers": [{"color": "#746855"}]},{"elementType": "labels.text.stroke","stylers": [{"color": "#242f3e"}]},{"featureType": "administrative.locality","elementType": "labels.text.fill","stylers": [{"color": "#d59563"}]},{"featureType": "poi","elementType": "labels.text.fill","stylers": [{"color": "#d59563"}]},{"featureType": "poi.park","elementType": "geometry","stylers": [{"color": "#263c3f"}]},{"featureType": "poi.park","elementType": "labels.text.fill","stylers": [{"color": "#6b9a76"}]},{"featureType": "road","elementType": "geometry","stylers": [{"color": "#38414e"}]},{"featureType": "road","elementType": "geometry.stroke","stylers": [{"color": "#212a37"}]},{"featureType": "road","elementType": "labels.text.fill","stylers": [{"color": "#9ca5b3"}]},{"featureType": "road.highway","elementType": "geometry","stylers": [{"color": "#746855"}]},{"featureType": "road.highway","elementType": "geometry.stroke","stylers": [{"color": "#1f2835"}]},{"featureType": "road.highway","elementType": "labels.text.fill","stylers": [{"color": "#f3d19c"}]},{"featureType": "transit","elementType": "geometry","stylers": [{"color": "#2f3948"}]},{"featureType": "transit.station","elementType": "labels.text.fill","stylers": [{"color": "#d59563"}]},{"featureType": "water","elementType": "geometry","stylers": [{"color": "#17263c"}]},{"featureType": "water","elementType": "labels.text.fill","stylers": [{"color": "#515c6d"}]},{"featureType": "water","elementType": "labels.text.stroke","stylers": [{"color": "#17263c"}]}]; return ( <View style={styles.container}> <MapView provider={PROVIDER_GOOGLE} style={styles.map} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} customMapStyle={mapStyle} > <Marker draggable coordinate={{ latitude: 37.78825, longitude: -122.4324, }} onDragEnd={(e) => alert(JSON.stringify(e.nativeEvent.coordinate))} title={'Test Marker'} description={'This is a description of the marker'} /> </MapView> </View> ); } } const styles = StyleSheet.create({ container: { position:'absolute', top:0, left:0, right:0, bottom:0, alignItems: 'center', justifyContent: 'flex-end', }, map: { position:'absolute', top:0, left:0, right:0, bottom:0, }, }); |
Now run the iOS App using
1 | react-native run-ios |
If everything is done correctly then you will see the Google Map in iOS app
This is how you can integrate Google Map in your React Native Application. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂
Hi, this is wonderful and very easy to understand your article for react native with google map but i have successfully run the android apps but I am getting empty screen. i could see only bottom of google logo only. the map is not loaded fully. please help us. i didn’t encounter any errors.
actually, this is not a styles problem this is API key problem regenerate the API key and may it will work for you because same problem are occure with me
Are you using the same StyleSheet?
const styles = StyleSheet.create({
container: {
position:’absolute’,
top:0,
left:0,
right:0,
bottom:0,
alignItems: ‘center’,
justifyContent: ‘flex-end’,
},
map: {
position:’absolute’,
top:0,
left:0,
right:0,
bottom:0,
},
});
Thank you for your response and I fixed the issue. I was used hybrid Google map key during the development. Now I changed the android native app key. Now working fine.
REACT NATIVE MAPS NPM DOES NOT WORKS IN THE LATEST REACT 0.59.1 VERSION
PLZ HELP…
NPM IS INSTALLED
PACKAGE IS ALSO LINKED
BUT REACT NATIVE RUN ANDROID GIVES ERROR IN NEW PROJECT
Can you please provide the screenshot?
As well Have error
http://prntscr.com/n6f6o8
https://pastebin.com/XK39qXE1
Yes, I know the Map is giving this problem with the updated 0.59 version. I am working on it and will update the example in 1-2 days. Thank you for your comment to provide me the information about the error. I’ll mail you regarding the update.
Did you updated the example for 0.59 version? I also used 0.59 version but it’s not working.
Hello Nikeshala,
Map has some issue with 0.59 version..:(
I am still finding the solution for that..
cái này là do React-native-maps. Bạn chạy npm install –save “react-native-maps@react-native-community/react-native-maps#master là đc ngay.
This is because React-native-maps. You run npm install –save “react-native-maps @ react-native-community / react-native-maps # master is right away.
how to give rotation angle to overlay image on google map?
i am using react native 0.60 and react native map version 0.25, after installed maps my app is crashed .. i don’t the reason
With the updated of React native 0.60, you also have to update Android SDK for the AndroidX. Can you please check once? also can you please confirm your device support application version?
I am using react native 0.60.The app is working fine for me but not the latitude and longitude in alert box.
It is set on a click of the marker. Have you clicked the marker?