Integrating Google Maps with React Native Maps

eact_native_app_appacademy
A few weeks ago I created an App that used Google Maps to locate food destinations. I had difficulty getting my map working and hiding my API key. But I’m going to show how I got around the obstacles so you can learn too.

What you need:

  • Knowledge of React or HTML
  • An account with Google
  • Node.js and npm
  • Expo: An App you can download on your phone (for Android, I preferred this route for app testing)
  • Xcode: If you have a Mac and want to test using the iOS simulator (alternative for app testing)

Time to do some installs:

npm install -g n
sudo n 7.7

First we global install n which is awesome because it allows you to change your version of node. You might be wondering why would I want to revert back to an older version of node. The answer is that when working with libraries such as GraphQL or Stripe the latest version of node can have various install issues. I keep running into this problem when working with the newer libraries.

Above our line ‘npm install -g n’ is saying install n globally so we can access it in all our directories. Type sudo before the command if you have permission issues. Then our second command ‘sudo n 7.7’ tells n to go to version 7.7.

node -v

Use ‘node -v’ to check the version of node, this command will tell you if node’s version changed to the one your specified. Do this after to ensure that node changed. How do we go back? Simple.

sudo n latest

This will take us back to the latest version of node. Now, to create our basic mobile app with a map.

create-react-native-app myproject

‘myproject’ is a placeholder for whatever you would like to call your app. Give it a good name. Next cd into your project and npm install. npm is an amazing copy and paste machine. It will get all the files required in the package.json and install them. Then you can npm start and you should get something like this.

This QR code needs to be scanned by the Expo App on your phone. After you scan the code, the JavaScript will bundle and you should get a view on your phone. This will be how you can test your App for Android. Expo might close or re-bundle sometimes, so don’t get worried if your screen goes blank.

Conversely, if you’re developing an App for iOS, you will need Xcode, located in the App store. Disclaimer:  Xcode can take half an hour or more to install. You will need to use ‘npm run ios’ instead of ‘npm start’. I do truly recommend Expo over the simulator because you can use Expo on your iOS device. The choice is yours.

After you get your App on your phone, you should see a screen that looks like the one below. What you see in the screen is exactly what you will see inside App.js.

Now look through App.js to see anything familiar. You see <View> and <Text> tags. These tags are synonymous to the corresponding tags listed below. Your <View> tag will contain everything you want to render inside your view.

  • View === div
  • Text == p (paragraph tag)
  • Image === img

When you get rid of the styling on the bottom of App.js, it will look like this:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We are now going to make our own simple styling for our map. Not much longer till we can render a map. We need to install react native maps and go make an account.

  1. npm install react-native-maps
  2. Go to https://cloud.google.com/maps-platform/

Go to the ‘Get Started’ section and it will walk you through how to get an API key. Select ‘map’ in the check box option. It will ask you for credit card information. Google will give you a free trial and will not bill you unless you ask to upgrade your account. You will not be charged and they give $300 in credit for whatever you want to do with your App. Now you will get an API key for your map. If you do not hide your API key, bad things can happen like someone else ruining your account — or worse. Get in the habit of hiding your API keys.

We now need to secure our API key. Inside our root directory (same level as package.json), we need to make a file called:

touch app-env

Make sure you’re inside of the ‘myproject’ directory. Inside of the command line run

printenv

This will show you the environmental variables for this directory.

Inside of the app-env, export your API key like the following example. Do this without quotes so you can directly paste your API key.

export API_KEY=THIS_THING_IS_YOUR_API_KEY

Also give your API key a good name so you can differentiate it from other possible keys. For example, we have one key for maps and one for firebase here.

export GOOGLE_MAPS_API_KEY=key_goes_here
export FIRE_BASE_API_KEY=key_here

Now, to make the magic happen. Inside the same directory, add this:

source app-env

If you ‘printenv’ after this command, your keys will now show up. We can now access these keys with:

const GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY;

Now inside of .gitignore / if you do not have a .gitignore make one

#apikey
   app-env

This will allow you to ignore the app-env information. You are now safe to push your code up to Github. So lets finally render this map. Go to:

Now you can see all the special tags that React-Native-Maps gives you. Install react-native-maps in your command line. Lets go back to App.js and import maps.

npm install 'react-native-maps'
import MapView, { PROVIDER_GOOGLE} from 'react-native-maps';

The react native maps documentation gives you a simple template to start with the map. Inside of the View, tag remove all the text and replace it with the <MapView> example the documents provide you. With Maps, Icons, and Images in react native, you may run into the problem rendering them when placed in the view. This can be fixed by styling these tags or components.

For the view you can pass in a style of flex 1 and for the map, you can pass in the style of flex 10 so the map renders on the whole view or more. Then, we pass the map view our api key and the provider.

style={{ flex: 1}} //for view
style={{ flex: 10}} //for map
<MapView
  apikey={GOOGLE_MAPS_API_KEY}
  provider={PROVIDER_GOOGLE}/>
Here is what you’re App would look like if you followed along.

This will only render the map on your Apps view. If you wish to use Markers or any of the other components provided by react native maps, check out the documents as they are quite clear to help you improve your map. https://github.com/react-community/react-native-maps

In the next post, I will demonstrate how to have a TabNavigation to clean up our app and give it more views. We will also map coordinates and style Icons representing coordinates.

Until next time.

Apply to App Academy: http://bit.ly/AppAcademyOnline

Written by Ozal Khan

Leave a Reply