How to fit polylines to street curves in google maps flutter?

Question

I did being playing with Polylines in google_maps_flutter for 2 months and I have this doubts:

Polylines do not follow the street curves or the highways.
Polylines has the OnTap callback but, on multi-polylines I can not get any ID or attribute to distinguis who I tapped.

can any one give me a hand with this?

I am new in Flutter and I am using the Directions API from Google. Maybe is not the right API to solve this problem.

I need that polyline set follow the street curves.

Polylines in google_maps_flutter

P.S: Sorry if my code bleed your eyes!

google_maps_flutter widget:

GoogleMap(
  onMapCreated: (controller) {
    _mapController = controller;
  },
  initialCameraPosition: CameraPosition(
    target: getCurrentLocation(),
    zoom: 15,
  ),
  mapType: _currentMapType,
  myLocationEnabled: true,
  myLocationButtonEnabled: false,
  compassEnabled: true,
  rotateGesturesEnabled: true,
  markers: _markers,
  polylines: _polyline,
)

Set state to show the polyline and markers:

setState(
    () {
      _markers.clear();
      for (var point in itinerary) {
        _markers.add(
          Marker(
            markerId: MarkerId("stop ${point.latitude}"),
            position: LatLng(point.latitude, point.longitude),
            infoWindow: InfoWindow(title: point.address),
          ),
        );
      }

      _polyline.clear();
      _polyline.add(
        flutter.Polyline(
          polylineId: PolylineId("route"),
          points: ccc,
          width: 8,
          color: Colors.red,
          geodesic: true,
          jointType: JointType.round,
        ),
      );
      _mapController.animateCamera(
        CameraUpdate.newLatLngZoom(
            LatLng(origin.lat, origin.lng), 13.0),
      );
    },
);

Google Directions API Call:

GoogleMapsDirections(apiKey: apiKey).directions(origin, destination, waypoints: itinerary, ).then((DirectionsResponse response) { return response }

score 2 · Answer 1 · answered Jul 18 '19 at 19:03

I got some advice from Github member that told me to try SnapToRoad, now I get more details about the route, but the highways are still helicopter's travel

A simple GET to https://roads.googleapis.com/v1/snapToRoads whit the API_KEy and some points of my previus polyline helps.

Here is the link of SnapToRoad

score 0 · Answer 2 · answered Jul 17 '19 at 17:24

0

That's because the polyline it's just a line that you draw, to do what you want need to make a route between points and using that generated coordinates make a polyline.

Check this tutorial that i found: https://www.developerlibs.com/2018/08/flutter-how-can-draw-route-on-google.html

answered Jul 17 '19 at 17:24

lickybuay

90
1
7

Thanks @lickybuay, I started my development from that tuto. But I decided to use google_maps_flutter, so I hit the face with the wall :P – Sergio Ruiz Jul 18 '19 at 18:26

score 0 · Answer 3 · answered Jul 19 '19 at 10:16

0

try this pub: google_map_polyline

answered Jul 19 '19 at 10:16

Jim

6,928
1
7
18

How to fit polylines to street curves in google maps flutter?

3 Answers3