Use current location to draw poly lines to a destination and also to add markers on google maps with markers flutter

Question

I have an application with a google map, the application gets my current location, there are two markers on the map, one point of the marker and the polyline are coordinates passed from a previous screen. I want the starting point of the poly line to be my current location. I also want to use my current location for the first marker. If the polyline and marker will change position as the driver moves, that will be great. But this is not a priority now.

What I have done so far: I am able to get my current location. I am able to draw polyline from a hardcoded coordinates to a destination location(the destination location was provided by a previous screen)

What I want to do: Use my current location as the starting point of my polyline Use my current location to add a marker Update the polyline and the marker when the driver moves.

Here is the code I have so far.


class _MyAppState extends State {
  late GoogleMapController mapController;
  // Starting point latitude
  // 5.6609595, -0.017155699999989338)
  double _originLatitude = 5.555700;
  // Starting point longitude
  double _originLongitude = -0.196300;
  // Destination latitude
  double? destLatitude;
  // Destination Longitude
  double? destLongitude;
  // Markers to show points on the map
  Map markers = {};
  Map polylines = {};
  List polylineCoordinates = [];

  PolylinePoints polylinePoints = PolylinePoints();


  Completer _controller = Completer();

  late Position currentPosition;

  var geoLocator = Geolocator();
  late Geolocator geolocatorTwo;
  var locationOptions = LocationOptions(accuracy: LocationAccuracy.bestForNavigation, distanceFilter: 4);

  Future getCurrentPositiion() async {
    Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.bestForNavigation);
    currentPosition = position;
    LatLng pos = LatLng(position.latitude, position.longitude);
    mapController.animateCamera((CameraUpdate.newLatLng(pos)));
    print('MyPosition');
    print(currentPosition);
    print(pos.longitude);
    print(pos.latitude);
    print(position.longitude);
    print(position.latitude);
    print(pos);
    return pos;
  }

  static const LatLng _center = const LatLng(45.521563, -122.677433);

  @override
  void initState() {

    /// add origin marker origin marker
    _addMarker(
      LatLng(_originLatitude, _originLongitude),
      "origin",
      BitmapDescriptor.defaultMarker,
    );

    // Add destination marker
    _addMarker(
      LatLng(double.parse(widget.vendors!.latitude), double.parse(widget.vendors!.longitude)),
      "destination",
      BitmapDescriptor.defaultMarkerWithHue(90),
    );
    _getPolyline();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

        body: GoogleMap(
          padding: EdgeInsets.only(top: 135),
          myLocationButtonEnabled: true,
          myLocationEnabled: true,
          mapType: MapType.normal,
          initialCameraPosition: googlePlex,
          onMapCreated: (GoogleMapController controller){
            _controller.complete(controller);
            mapController=controller;
            getCurrentPositiion();
          },
          polylines: Set.of(polylines.values),
          markers: Set.of(markers.values),
        ),
      ),
    );
  }


  // This method will add markers to the map based on the LatLng position
  _addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
    MarkerId markerId = MarkerId(id);
    Marker marker =
    Marker(markerId: markerId, icon: descriptor, position: position);
    markers[markerId] = marker;
  }

  _addPolyLine(List polylineCoordinates) {
    PolylineId id = PolylineId("poly");
    Polyline polyline = Polyline(
      polylineId: id,
      points: polylineCoordinates,
      width: 8,
    );
    polylines[id] = polyline;
    setState(() {});
  }

  void _getPolyline() async {
    List polylineCoordinates = [];

    print("In the Polyline");
    print(currentPosition);
    print(currentPosition.longitude);


    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      "APP KEY",
      PointLatLng(_originLatitude, _originLongitude),
      PointLatLng(double.parse(widget.vendors!.latitude), double.parse(widget.vendors!.longitude)),
      travelMode: TravelMode.driving,
    );
    if (result.points.isNotEmpty) {
      result.points.forEach((PointLatLng point) {
        polylineCoordinates.add(LatLng(point.latitude, point.longitude));
      });
    } else {
      print(result.errorMessage);
    }
    _addPolyLine(polylineCoordinates);
  }

  void getLocationUpdates(){
    var homeTabPositionStream = Geolocator.getPositionStream().listen((Position position) {
      currentPosition = position;
      LatLng pos = LatLng(position.latitude, position.longitude);
      mapController.animateCamera(CameraUpdate.newLatLng(pos));
    });
  }
}

What am I missing, why can't I just use currentPosition.latitude and currentPosition.longitude?

Use current location to draw poly lines to a destination and also to add markers on google maps with markers flutter

Answers (1)

Related Questions