Using Google Maps API in React Native for iOS/Android

Training

Online

up to £ 100

Description

  • Type

    Training

  • Methodology

    Online

  • Class hours

    3h

  • Start date

    Different dates available

"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 routeI'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!"

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About this course

"Learn how to build a map app for both iOS and AndroidLearn how to use react-native-mapsLearn how to use Google Maps APILearn how to use Google Places APILearn how to use Google Routes/Directions API"

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

"Know basic JavaScriptKnow fairly basic React Native"

"-100% online -Access to the course for life -30 days warranty money back -Available from desktop or mobile app -Can begin and finish the course any time -Can repeat the course any times"

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Reviews

This centre's achievements

2020

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 3 years

Subjects

  • Google
  • map
  • Google Maps
  • Google API
  • REACT NATIVE
  • IOS
  • Android
  • Architecture
  • MAPS
  • Maps app
  • Google places
  • Google routes
  • Mobile
  • Mobile Apps
  • Places
  • Directions
  • Maps installation
  • Android links
  • User location
  • Places API

Course programme

"Getting access to Google Maps API
Generating a Google Maps/Places/Directions API key
Installing react-native-maps
Introduction
Install React Native first!
Init with correct React Native version
Check if build succeeds!
react-native-maps documentation intro
yarn add react-native-maps
Git init & react-native link
Changed files from linking
Check if build succeeds after linking!
Creating a MapView test component
If issues with Android react-native-maps installation
Ensure emulator has Google API's!
Intro to manual install and docs
Undoing Android link changes
Android react-native-maps manual steps
iOS react-native-maps installation
Remove PROVIDER_GOOGLE
Performance issues on iPhone X simulator
react-native-maps examples
Setting a full screen layout
Show user location in react-native-maps
Intro to section
A little refactor
Enabling user location in MapView
Asking for location permissions in Android
Note on getting user position in newer React Native
Getting the user's latitude and longitude
Using Places Autocomplete API in React Native
Learn how to use Places Autocomplete API with Postman
Restructuring and creating PlacesInput component
Styling PlaceInput component
Calling Places Autocomplete API in React Native
Showing Places API predictions in React Native
Styling place predictions
DIsplay predictions based on input
Refactoring
Tap anywhere to dismiss keyboard
Using debounce to limit API calls
Hiding list of predictions on tapping
How do we get latitude and longitude to PlaceInput?
Moving location state to parent component
Using device location for Places Autocomplete
Drawing routes with Google Routes API and react-native-maps
Intro to section and remember to check out repository!
Calling Directions API in Postman
Passing Place ID to App
Calling Directions API in React Native
How Polyline works
Converting Polyline to Latitude and Longitude array
Time to draw the Polyline in map!
How do we zoom out to show route?
Refactoring MapScreen
Calling FitToCoordinates on our ref
Adding edgePadding
Adding a Marker and tidying up code"

Using Google Maps API in React Native for iOS/Android

up to £ 100