CODEWITHSUNDEEP
firebasefluttergoogle-mapsgeolocationfluttermap
Sandun Sameera
Sandun Sameera

Reputation: 432

Flutter : polylines show straight line

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 wellenter image description here

Upvotes: 0

Views: 4756

Answers (4)

mohsen tavosi
mohsen tavosi

Reputation: 155

enter image description hereIn the flutterMap(flutter_map: ^6.0.1) in order to draw Line between two Point you should draw Polyline in PolylineLayer like below code

here is my code

FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        keepAlive: true,
        initialCameraFit: CameraFit.coordinates(
          coordinates:
              widget.markers?.map((e) => LatLng(e.point.latitude, e.point.longitude)).toList() ?? [widget.center!],
        ),
        initialCenter: widget.center ?? const LatLng(-37.750928, 145.024253),
        interactionOptions: InteractionOptions(
          flags: widget.interactiveFlag ?? InteractiveFlag.all,
        ),
        onPositionChanged: (position, hasGesture) {
          if (widget.onPositionChanged != null) {
            widget.onPositionChanged?.call(position);
          }
        },
      ),
      children: [
        TileLayer(
          urlTemplate: 'YOUR_URL_TILE',
        ),
        MarkerLayer(markers: widget.markers ?? []),
        PolylineLayer(
          polylines: [
            Polyline(
                points: widget.markers?.map((e) => LatLng(e.point.latitude, e.point.longitude)).toList() ?? [],
                color: getPrimaryColor,
                isDotted: true,
                strokeWidth: 3)
          ],
        ),
      ],
    )

Upvotes: -2

Khalil LAABOUDI
Khalil LAABOUDI

Reputation: 254

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

Upvotes: 0

jabamataro
jabamataro

Reputation: 1232

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"),
));

Upvotes: 1

Khalil LAABOUDI
Khalil LAABOUDI

Reputation: 254

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

Upvotes: 1

Related Questions