Flutter : polylines show straight line

Question

Im implementing a flutter app to display polylines by flutter google maps plugin, But It only shows a straight line between those two points rather than showing actual route, I'm not quite sure what needed to do.

Here my add markers function

void addMarker() {
latlng.add(LatLng(5.973804, 80.429838));
allMarkers.add(Marker(
  markerId: MarkerId('busLoc'),
  draggable: true,
  onTap: () {
    print('Marker Tapped');
  },
  position: LatLng(5.973804, 80.429838),
));

_polyline.add(Polyline(
  color: Colors.blue,
  visible: true,
  points: latlng,
  polylineId: PolylineId("distance"),
));

Here my scaffold

GoogleMap(
    
    polylines: _polyline,
    markers: Set.from(allMarkers),
    initialCameraPosition:
        CameraPosition(target: LatLng(widget.la, widget.l0), zoom: 14),
    mapType: MapType.normal,
  ),

And I'll attach screenshot below as well

score 1 · Answer 1 · answered Nov 05 '20 at 05:02

1

it shows straight line because you have in your polyline only two points, so the expected behavior is to draw a line from one point to the other

answered Nov 05 '20 at 05:02

Khalil LAABOUDI

244
1
2
12

so can you give me a hit what can I do to identify a route between these two point? – Sandun Sameera Nov 05 '20 at 08:36
the concept of polyline is connecting the points you give it with lines. so if you wanna get the route between two points you have to use other api which is Direction Api , this is a tutorial how to do it . just folow with it . https://medium.com/flutter-community/drawing-route-lines-on-google-maps-between-two-locations-in-flutter-4d351733ccbe – Khalil LAABOUDI Nov 05 '20 at 15:02

score 1 · Accepted Answer · answered Nov 05 '20 at 10:04

To get the route from point A to point B you will need to use Directions API that is available on the google_maps_webservice flutter package, which is a service from Google Maps Platform that gives the route information

One of the route information is the overview_polyline that holds an encoded polyline representation of the route.

You can get the overview_polyline by having a function that sends request to Directions API using the google_maps_webservice package like this:

import 'package:google_maps_webservice/directions.dart' as directions;

final _directions = new directions.GoogleMapsDirections(apiKey: "YOUR_API_KEY");

var overviewPolylines;

directions.DirectionsResponse dResponse = await _directions.directionsWithAddress(
     _originAddress, 
     _destinationAddress, 
);

if (dResponse.isOkay) {
  for (var r in dResponse.routes) {
    overviewPolylines = r.overviewPolyline.points
  }
}

Then, once you get the overview_polyline from Directions API using the sample code above, you will need to decode it using the PolyUtil(); method from the google_maps_util flutter package like this:

import 'package:google_maps_util/google_maps_util.dart';

PolyUtil myPoints = PolyUtil();
var pointArray = myPoints.decode(overviewPolylines);

Once decoded you can pass the pointArray to your polyline object like this:

_polyline.add(Polyline(
 color: Colors.blue,
  visible: true,
  points: pointArray,
  polylineId: PolylineId("distance"),
));

Great !! just what I was looking for, Thanks mate..!! – Sandun Sameera Nov 05 '20 at 18:15 — Sandun Sameera, Nov 05 '20 at 18:15

score 0 · Answer 3 · answered Nov 05 '20 at 15:04

0

you have to use google direction API here is an article explains how to draw route between two points in flutter.

https://medium.com/flutter-community/drawing-route-lines-on-google-maps-between-two-locations-in-flutter-4d351733ccbe

answered Nov 05 '20 at 15:04

Khalil LAABOUDI

244
1
2
12

Flutter : polylines show straight line

3 Answers3