Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native maps drawing directions

I found so much solutions for using Gmaps (maps, markers, animations, geolocation) in React Native app. But I can't found any guides to using Gmaps Directions. How can i used Google maps Directions API and drawing direction on map with React Native? Can i solve this problem by default MapView, or need custom package?

like image 491
Alexander Kushnir Avatar asked Jun 16 '16 11:06

Alexander Kushnir


2 Answers

We need to draw directions using Mapview.Polyline component from airbnb. TO draw the the polyline, we need to get coordinates of route between two locations, which we can get by making API calls as mentioned in https://developers.google.com/maps/documentation/directions/intro#DirectionsRequests then getting JSON object by making API calls from which we should use overview_polyline string and decode it to get list of LatLang objects and pass it as prop to Mapview.Polyline to get the route displayed on map.

Sample API call https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=YOUR_API_KEY

Insert your google API key in the url

like image 135
Kranthi Avatar answered Sep 22 '22 12:09

Kranthi


Be careful of incorporating navigation into your app via GoogleMaps APIs as it may be in violation of Google's Terms & Conditions. We ran into this recently.

Here is the link Google Maps API T&Cs

Check out 10.4.c.iii "No Navigation"

I might be reading it or understanding it incorrectly, but I took it to mean do not use the API to navigate.

like image 26
Lucky1715 Avatar answered Sep 19 '22 12:09

Lucky1715