Draw a route in Flutter with google_maps_flutter package

Question

I have a map already drawn with google_maps_flutter and I have 2 markers on it. I would like to draw a route between them. Can anybody help me?

When I use the one suggested by @CopsOnRoad, I have the picture displayed. I would like the route to be the blue line, which goes the best way forward.

score 4 · Answer 1 · answered Sep 20 '19 at 17:13

4

Since you haven't shared any code, I am going to give you an example from here

Add this to your StatefulWidget subclass.

Map<PolylineId, Polyline> _mapPolylines = {};
int _polylineIdCounter = 1;

void _add() {
  final String polylineIdVal = 'polyline_id_$_polylineIdCounter';
  _polylineIdCounter++;
  final PolylineId polylineId = PolylineId(polylineIdVal);

  final Polyline polyline = Polyline(
    polylineId: polylineId,
    consumeTapEvents: true,
    color: Colors.red,
    width: 5,
    points: _createPoints(),
  );

  setState(() {
    _mapPolylines[polylineId] = polyline;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Maps"),
      actions: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: _add)],
    ),
    body: GoogleMap(
      initialCameraPosition: const CameraPosition(target: LatLng(0, 0), zoom: 4.0),
      polylines: Set<Polyline>.of(_mapPolylines.values),
    ),
  );
}

List<LatLng> _createPoints() {
  final List<LatLng> points = <LatLng>[];
  points.add(LatLng(1.875249, 0.845140));
  points.add(LatLng(4.851221, 1.715736));
  points.add(LatLng(8.196142, 2.094979));
  points.add(LatLng(12.196142, 3.094979));
  points.add(LatLng(16.196142, 4.094979));
  points.add(LatLng(20.196142, 5.094979));
  return points;
}

answered Sep 20 '19 at 17:13

CopsOnRoad

237,138
77
654
440

Thanks. Sorry for not submitting code is that the question is generic and not based on existing code. I had found this code that I am routing, but it draws straight lines from one point to another and not a route based on existing routes from one marker to another. Am I correct in this? – Everton Coimbra de Araújo Sep 20 '19 at 22:21
Don't you mean line between 2 points a `route`? You must be showing marker on some `LatLng`, using same `LatLng` you can create line or route. – CopsOnRoad Sep 21 '19 at 06:46
I inserted a picture in the post that presents what I have with your suggestion and what I would like to have. – Everton Coimbra de Araújo Sep 21 '19 at 12:01
Ok, I got it, but sorry there is no way of doing it as of now that will help you join 2 points via valid road, all you need to do is create many `LatLng` (road latitude and longitude) to print what you desire. – CopsOnRoad Sep 21 '19 at 12:12
Ok. Is there no way to get a route with the flutter, or with the plugin? Do you know if there is a plugin that generates this? – Everton Coimbra de Araújo Sep 21 '19 at 12:42
AFAIK, there is no way of doing it using any package/plugin, you need `LatLng` every second. – CopsOnRoad Sep 21 '19 at 14:24
There is a way to do this. Just see https://www.youtube.com/playlist?list=PLmnT6naTGy2TNKTW2W-twfG_gFuCtnFQF. Its great – Everton Coimbra de Araújo Oct 12 '19 at 17:26
That's just link to the playlist, can you share the exact video which does that? Right now I am bit busy on other project so can't watch all the videos. – CopsOnRoad Oct 12 '19 at 17:32
Ok. Sorry. The firts video is there in https://www.youtube.com/watch?v=IAIDZxwnEdI&list=PLmnT6naTGy2TNKTW2W-twfG_gFuCtnFQF&index=6&t=0s. There is one more in https://www.youtube.com/watch?v=uir-x_w-O7U&list=PLmnT6naTGy2TNKTW2W-twfG_gFuCtnFQF&index=6. It' work – Everton Coimbra de Araújo Oct 14 '19 at 13:17
Hi, I'm sorry, bit busy in working on some project and had a view from above and couldn't find where exactly the presenter did that, since you have watched the full video, can you share the pin point link for the video? – CopsOnRoad Oct 14 '19 at 13:39

score 0 · Answer 2 · answered Aug 19 '20 at 13:03

Good to have a route as you want it is necessary to have several points and valid streets, this in your case is very important. I suggest you pay for an existing service like google direction. You can get the coordinates and street names with google direction.

API (Google Direction)

https://maps.googleapis.com/maps/api/directions/json?origin=LAT,LON&destination=LAT,LON&key=API_KEY

Example Draw a route (google direction)

https://github.com/DeveloperLibs/flutter_google_map_route/blob/master/lib/map_screen.dart

Draw a route in Flutter with google_maps_flutter package

2 Answers2