Flutter draw route polyline and calculate distance on Google Map.


MorUde Frrr - (Fly Or Not)



Many developer looking same things, how to draw polyline/route on map? So here you are on right place we going to draw route on Google Map.

So first of all, You have to create Flutter project and need to add below dependancy in pubspec.yaml file.

[google_maps_flutter]

We are going to use official Flutter google map plugin. You have to follow all the requirement septs to add google map plugin in the project  and also need to generated google map API KEY.

Well thats enough right now. We are going on coding funda. Let's open your project. Right now you have set it up Google Map API KEY for iOS and Android platform.

I don't want to write details because many tutorials you can find how to integrate Google Map in the Flutter app.

So, Let's start for route on the map.






Here we have declare  _initialCamera to display current visible area of the map.
Two LatLng for draw route line source to destination here,  variable name will be anything you want.




Added marker for source and destination LatLong.





In the build method we have integrated initial Google Map.










Here below is main code that will use to draw the route.

https://maps.googleapis.com/maps/api/directions/json?origin=Lat,Long&&destination=Lat,Long&key=XYZ

By calling above url, you will get steps  and also you will get the distance between source and destination.

Instead of write code here, You can check full code from my GitHub repo. Below is the link, Download and check the code The result will be.







Good Luck!!!