Google Maps with React Native | Directions, Pins, and Location

Learn how to build a React Native app with Google Maps for directions, pins, and the user's current location. It is ideal for delivery, transportation, or any project that needs interactive maps.

I guide you from creating an Expo project and installing react-native-maps to configuring origin, destination, movable pins, and real addresses via the Google Maps API.

What's inside

• Introduction and Google Maps app context
• Creating the Expo project and initial setup
• Installing and using react-native-maps
• Setting initial map position with latitude and longitude
• Adding and moving pins (markers) on the map
• Using Polyline to show routes between points
• Dynamic directions when pins move
• Tips for coordinates and the Google Maps API

Introduction and Google Maps app context

I explain why Google Maps matters in apps like Uber, Airbnb, and DoorDash, and what we will build: origin and destination with movable pins that update directions through the Google Maps API.

Useful for delivery and transport apps that need routes and real-time location, with draggable map points for accurate addresses.

Creating the Expo project and initial setup

We create a new Expo project with the minimal template via expo init to avoid extra files.

Open in Visual Studio Code, run expo start, and open the iOS simulator to confirm a basic app runs.

Installing and using react-native-maps

Install with yarn add react-native-maps. Import MapView to render the map.

Assign width and height at 100% so the map fills the screen and renders correctly.

Setting initial map position with latitude and longitude

State origin holds latitude and longitude for the starting map region. Copy coordinates from Google Maps on the web by clicking a point.

Pass them to initialRegion on MapView with latitudeDelta and longitudeDelta for zoom, for example centering on Atlanta airport.

Adding and moving pins (markers) on the map

Import Marker from react-native-maps. Each marker needs a coordinate with lat and lng.

Add origin and destination markers. Moving them updates location and fetches new directions, useful for pick-up and drop-off selection.

Using Polyline to show routes between points

Import Polyline to draw a line between origin and destination. Customize color and stroke width to match your design.

Clear route visualization improves map UX.

Dynamic directions when pins move

When a pin moves, coordinates update and the Google Maps API returns the address for the new location.

Real, updated addresses make delivery and navigation apps more accurate.

Tips for coordinates and the Google Maps API

Open Google Maps in the browser, click a location, and copy the coordinates shown below.

Create a Google Maps API key for directions and routing services so the app can query real routes dynamically.

Resources

CourseReact Native course

Build React Native apps from zero through production.

YouTubeReact Native Maps Tutorial

Step-by-step video on integrating maps in React Native with react-native-maps.