React Native: Turn by Turn Directions with Google Maps and Polylines
I’m writing this post to demystify how to render polylines along with Google Map routes. In this example, I will walk through how to render a route from Washington Square Park to Union Square NYC.
Before we get started, we will need to install the following libraries into our React Native Project: react-native-maps, @mapbox/polyline, react-native-google-maps-directions, native-base.
Step 1: Rendering React Native Maps
After installing said libraries, we will begin by rendering the react-native map. First we will need to import react from React, Stylesheet, and View from react-native, MapView from react-native-maps, Polyline from @mapbox/polyline, button and icon from native-base and
getDirections from react-native-google-maps-directions like so:
Next we will create a class component and give it a state with a coordinates property. Note that if the intent is to render chained polylines, it is best if we define the coordinates property with an empty array, like so:
Now we will render the map and include a marker to designate our end destination. To render the Map, we will need to give it an initial position, complete with longitude, latitude, longitude delta and latitude delta coordinates. Likewise, the marker will also need latitude and longitude coordinates. For the purposes of this example, coordinates to Washington Square Park and Union Square were given to the map and marker respectively. For an explanation of these components as well as other components available to react maps, refer to this Github repo.
Step 2: Google Map Directions
Once we have rendered the map, we can proceed to mapping a route via Google maps, but first we will need to get a Google Maps API key, instructions on how to get a key can be found here. Once you have gotten a key, we will get directions by invoking the
handleGetDirections function from react-native-google-maps-directions. For a more in depth explanation of the capabilities of the react-native-google-maps-directions library, refer to this Github repo.
In essence, the
handleGetDirections function works by setting a starting position (“source” in the code below), the destination, and the method by which to find a route, i.e. walking, bicycling, driving or transit. At the end of our function we will invoke the
getDirections function from google-maps-api which takes a starting location and an ending location parameter. Continuing with our example, the starting location has been defined with coordinates for Washington Square Park and the ending location has been defined with coordinates for Union Square. For the purpose of this example, walking directions will be rendered for the route once the
handleGetDirections method is invoked. As such, we will need to bind
handleGetDirections to the constructor.
Next we will define the
getDirections function. Make sure to bind this to our constructor, as we will invoke the function in the componentDidMount life cycle method, like so:
- Fetches directions data from Google — make sure to add your API Key to the URL
- Decodes encoded polyline data
- Converts decoded polyline data into a list of objects
Step 3: Draw a route on the map
Now we can draw our route on the map. To do this, we can use
MapView.Polyline from react-native-maps in our
render method, as well as invoke the
handleGetDirections method by setting an
onPress event listener on the man icon in our render method below.
You can find more info on detailed usage of
Once you finish these steps, a map of Manhattan should render with a blue polyline between Washington Square Park and Union Square. Additionally, upon pressing the person icon, google maps will appear on either the browser (if google maps is not installed on your phone) or the app and begin navigating you to Union Square.