Flutter Google Maps - Rotate marker according to the driving direction

Question

Can anyone share a documentation / code sample for Flutter google maps plugin where I can rotate the marker ( ex: a car icon ) according to the driving direction. I saw this can be achieved on native library by rotating the marker. But couldn't fjnd any option to rotate the marker in Flutter.

I guess we need to consider below points while rotating the marker. Please add your thoughts on this as well.

Map North Direction. Devices rotation from compass.

Thanks

Spoilsman

Have you resolved that issue? Please help me if can fix this. – Woodbury

@Spoilsman Do you find solution? – Lum

Answer 1

https://pub.dev/packages/location plugin :

Marker( rotation: currentLocation.heading )

Nenitanenney

why does my heading keeps changing continuously?? I/flutter ( 7082): cur: 214.064697265625 I/flutter ( 7082): cur: 189.31724548339844 I am not rotating my phone whats so ever – Lymphangial

what is current Location? please describe and share proper answer, please – Monopolize

@SagarRAnghan From Location plugin : Location location = Location(); final currentLocation= await location.getLocation(); – Phallic

Answer 2

you can add compass plugin https://pub.dev/packages/flutter_compass and simply set the result direction to marker

Groot

flutter_compass is working for this solution. but this plugin not support for all devices. example: Huawei, Xiaomi – Lum

@BloodLoss there is another solution, please use location plugin pub.dev/packages/location plugin, which will give you the heading direction – Groot

Answer 3

You can calculate the rotation angle between two LatLng points to rotate the Marker using some mathematics. The below code is generated using an AI tool, and it works perfectly. Here, startPoint is the user's current location, and endPoint is the position where the user will move, and we have to show a direction arrow from start to end point.

double calculateBearing(LatLng startPoint, LatLng endPoint) {
    final double startLat = toRadians(startPoint.latitude);
    final double startLng = toRadians(startPoint.longitude);
    final double endLat = toRadians(endPoint.latitude);
    final double endLng = toRadians(endPoint.longitude);

    final double deltaLng = endLng - startLng;

    final double y = Math.sin(deltaLng) * Math.cos(endLat);
    final double x = Math.cos(startLat) * Math.sin(endLat) -
        Math.sin(startLat) * Math.cos(endLat) * Math.cos(deltaLng);

    final double bearing = Math.atan2(y, x);

    return (toDegrees(bearing) + 360) % 360;
  }

  double toRadians(double degrees) {
    return degrees * (Math.pi / 180.0);
  }

  double toDegrees(double radians) {
    return radians * (180.0 / Math.pi);
  }

Then, you can use this to rotate the Marker like this:

Marker(
   markerId: MarkerId(currentPosition.toString()),
   position: currentPosition,
   icon: movementArrow,  // Custom arrow Marker
   // Rotate the arrow in direction of movement. Func is defined below
   rotation: calculateBearing(previousPosition, currentPosition) - 90, 
   anchor: const Offset(0.5, 0.5), 
);

Here is a demo image:

Darsie

in what direction the image i should use as you said movementArrow. – Tourane