Using Google Maps API in React Native for iOS/Android

Name: Using Google Maps API in React Native for iOS/Android
Rating: 4.0 (96 reviews)

Learn how to build a Maps App in React Native with Google Maps API!

Created byStefan Hyltoft

Last updated 9/2019

English

What you'll learn

Learn how to build a map app for both iOS and Android
Learn how to use react-native-maps
Learn how to use Google Maps API
Learn how to use Google Places API
Learn how to use Google Routes/Directions API

Course content

8 sections • 50 lectures • 2h 31m total length

Generating a Google Maps/Places/Directions API key2:18

Introduction0:26
Install React Native first!0:29
Init with correct React Native version1:20
Check if build succeeds!0:34
react-native-maps documentation intro0:48
yarn add react-native-maps0:22
Git init & react-native link1:09
Changed files from linking0:36
Learn how to handle four file changes from linking for Google Maps API in a React Native app, detailing iOS and Android updates and manual steps when auto-linking fails.
Check if build succeeds after linking!0:36
Creating a MapView test component3:02

Learn how to use Places Autocomplete API with Postman7:55
Restructuring and creating PlacesInput component3:29
Styling PlaceInput component2:22
Calling Places Autocomplete API in React Native4:15
Showing Places API predictions in React Native3:37
Styling place predictions5:06
DIsplay predictions based on input2:48
Refactoring3:57
Refactor the React Native Google Maps UI by consolidating styles, restructuring the prediction object with structured formatting, and adding a one-second debounce to API calls, while disabling auto-correct and auto-capitalization.
Tap anywhere to dismiss keyboard2:21
Using debounce to limit API calls3:44
Hiding list of predictions on tapping9:49
How do we get latitude and longitude to PlaceInput?1:54
Moving location state to parent component3:58
Lift location state from the map screen to a parent component, obtain user position with permission, and pass latitude and longitude to child components via props.
Using device location for Places Autocomplete2:37

Intro to section and remember to check out repository!0:35
Calling Directions API in Postman6:46
Passing Place ID to App3:12
Calling Directions API in React Native5:05
How Polyline works2:20
Converting Polyline to Latitude and Longitude array5:37
Time to draw the Polyline in map!5:37
Use Google Maps API in React Native to render a polyline from destination coordinates, conditionally display it as a child component, and auto-zoom on destination selection.
How do we zoom out to show route?2:21
Refactoring MapScreen4:08
Learn how to refactor your map screen by forwarding refs to a child component, integrating map view and poly line from react-native-maps, and simplifying components without overusing refs.
Calling FitToCoordinates on our ref1:12
Adding edgePadding1:53
Adding a Marker and tidying up code6:40

Requirements

Know basic JavaScript
Know fairly basic React Native

Description

In this course you will learn:

How to build a Maps app for both iOS and Android
How to install react-native-maps, and pitfalls you can avoid when doing so!
How to ask for permission to get users location
How to show the user location
How to follow the user location on the map
How to use Google Maps API's easily
How to use Google Places Autocomplete API, to autocomplete as the user types
How to use Google Directions API, to get directions from the user location to a location
How to display this route inside our React Native app
How to zoom out map to display our route

I'm will show the quickest and easiest path to get a map app up and running for both iOS and Android, saving you lots of time that I've used when I couldn't find help, or had to fumble around various bugs!

Who this course is for:

React Native developer who wants a fast-track to using Maps and Google Maps API's!

Using Google Maps API in React Native for iOS/Android

What you'll learn

Explore related topics

Course content

Getting access to Google Maps API1 lecture • 2min

Installing react-native-maps10 lectures • 9min

If issues with Android react-native-maps installation4 lectures • 8min

iOS react-native-maps installation2 lectures • 2min

react-native-maps examples1 lecture • 3min

Show user location in react-native-maps6 lectures • 24min

Using Places Autocomplete API in React Native14 lectures • 58min

Drawing routes with Google Routes API and react-native-maps12 lectures • 45min

Requirements

Description

Who this course is for: