Mobile | Tue Apr 19 2022429 views

Google Maps

Welcome back my friend! πŸ€“

Google Maps is a web mapping and consumer application offered by Google. It is used to display maps, directions, and other information about locations.

About this app

In this project we learn how to use Google Maps API to create a simple app that shows the user the direction to a place


Init project

npx create-expo-app google-maps-react-native

Install dependencies

npx expo install expo-location dotenv react-native-maps react-native-maps-directions

Origin location

To find your geolocation origin, you can enter in Google map and click where you want, it will show the geolocation

const [origin, setOrigin] = React.useState({
  latitude: 33.640411,
  longitude: -84.419853,
return (
      latitude: origin.latitude,
      longitude: origin.longitude,
      latitudeDelta: 0.09,
      longitudeDelta: 0.04,
    // here there are other interesting props
    // showsUserLocation={true} // Shows where the user is.
    // followsUserLocation={true} // if the user is walking the map will move.


Markers are specific points in the map

import MapView, { Marker } from "react-native-maps";
return (
  <MapView style={}>
      image={carImage} // Custom πŸ“ marker
      onDragEnd={(direction) => setOrigin(direction.nativeEvent.coordinate)}
      // other interesting props
      // title="My car" // when the user click shows a title
      // description="This is my car" // when the user click shows a descripcion


If your app requires to have a straight line in the map between two points. You can use Polyline component.

Advance Directions

  1. Create a project or access an existing project in Google Cloud Console

  2. Enable Direction API.

  3. Get the credentials

  4. Add the env variables

Add plugins babel.config.js

module.exports = function (api) {
  return {
    presets: ["babel-preset-expo"],
    // add the plugins.
    plugins: [
          moduleName: "@env",
          path: ".env",
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
  1. API directions

This service allows to show what is the road to get to the destination

import MapViewDirections from "react-native-maps-directions";
// Component
return (

Share Location

With expo-location you can require the access of the user location.

  1. Import library:
import * as Location from "expo-location";
  1. function to get the location.
async function getLocationPermission() {
  let { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== "granted") {
    alert("Permission denied");
  let location = await Location.getCurrentPositionAsync({});
  const current = {
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,


Making this app will enable you to get familiar with the Google Maps API and Maps with React Native.

πŸ‘ Want to become a master in React Native? Check the React Native Course

Youtube GitHubDownload

Go back to Projects