[google_maps_flutter_web] The google maps widget doesn't behave as the mobile version (polyline)

[MarkAlexanderDev]

I'm currently working on a Flutter application mobile/web and I have an issue with the "google_maps_flutter" package. My goal is to display a map with a course drawn thanks to a polyline.

Here is a screenshot of the Android version which is working as expected :

Now, we have the web version which displays the Polyline as a straight line heading to the north :

Here is the code sample of my GoogleMap widget :

GoogleMap(
                  gestureRecognizers: Set()
                    ..add(Factory<PanGestureRecognizer>(
                        () => PanGestureRecognizer())),
                  initialCameraPosition: CameraPosition(
                      target: polylines.first.points.first, zoom: 20.0),
                  mapType: MapType.hybrid,
                  polylines: polylines,
                  compassEnabled: false,
                  tiltGesturesEnabled: false),
            ),

[✓] Flutter (Channel stable, 2.2.3, on Linux, locale en_US.UTF-8)
    • Flutter version 2.2.3 at /home/Mark/snap/flutter/common/flutter
    • Framework revision f4abaa0735 (12 days ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /home/Mark/Android/Sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /var/lib/snapd/snap/android-studio/113/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+0-b944-P17168821)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 6.0.0-1ubuntu2 (tags/RELEASE_600/final)
    • cmake version 3.10.2
    • ninja version 1.8.2
    • pkg-config version 0.29.1

[✓] Android Studio (version 4.2)
    • Android Studio at /var/lib/snapd/snap/android-studio/113/android-studio
    • Flutter plugin version 58.0.1
    • Dart plugin version 202.8531
    • Java version OpenJDK Runtime Environment (build 11.0.8+0-b944-P17168821)

[✓] Connected device (3 available)
    • MAR LX1A (mobile) • L2N0219A30008750 • android-arm64  • Android 10 (API 29)
    • Linux (desktop)   • linux            • linux-x64      • Linux
    • Chrome (web)      • chrome           • web-javascript • Google Chrome 91.0.4472.77

• No issues found!

Thank you in advance for your time 🙏

[darshankawar]

@MarkAlexanderDev
Try using this plugin and see if it helps, https://pub.dev/packages/flutter_polyline_points

[MarkAlexanderDev]

I've just tried and I get the same result :(

[darshankawar]

@MarkAlexanderDev
Can you provide a complete minimal code sample ?

[MarkAlexanderDev]

Sure, thank you for your help

class LatestRun extends StatelessWidget {
  final EntityGroup group;

  final PolylinePoints polylinePoints = PolylinePoints();
  final Set<Polyline> polylines = {};

  LatestRun({@required this.group});

  @override
  Widget build(BuildContext context) {
    final PolylineId id = PolylineId("poly");
    polylines.add(Polyline(
        width: 3,
        color: mainColor,
        polylineId: id,
        points: convertToLatLng(
            polylinePoints.decodePolyline(group.lastRunPolyline))));
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Container(
        width: 150,
        color: mainColor,
        padding: EdgeInsets.all(8.0),
        child: Text("Latest runs".toUpperCase(), style: textStyleTitle),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              group.lastRunner +
                  " put in " +
                  (group.lastRunDistance / 1000).toStringAsFixed(3) +
                  "km",
              style: textStyleH2.copyWith(color: mainColor),
            ),
            SizedBox(height: 5),
            SizedBox(
              width: kIsWeb ? 500 : MediaQuery.of(context).size.width,
              height: kIsWeb ? 500 : MediaQuery.of(context).size.width,
              child: GoogleMap(
                  gestureRecognizers: Set()
                    ..add(Factory<PanGestureRecognizer>(
                        () => PanGestureRecognizer())),
                  initialCameraPosition: CameraPosition(
                      target: _getAverageLatLng(polylines.first.points),
                      zoom: 15.0),
                  mapType: MapType.terrain,
                  polylines: polylines,
                  compassEnabled: false,
                  tiltGesturesEnabled: false),
            ),
          ],
        ),
      )
    ]);
  }

  LatLng _getAverageLatLng(List<LatLng> points) {
    final List<double> lats = [];
    points.forEach((element) {
      lats.add(element.latitude);
    });
    final List<double> lons = [];
    points.forEach((element) {
      lons.add(element.longitude);
    });
    return LatLng(lats.reduce((a, b) => a + b) / lats.length,
        lons.reduce((a, b) => a + b) / lons.length);
  }
}

List<LatLng> convertToLatLng(List<PointLatLng> points) {
  List<LatLng> result = <LatLng>[];
  for (int i = 0; i < points.length; i++)
    result.add(LatLng(points[i].latitude, points[i].longitude));
  return result;
}

[darshankawar]

I came up with a complete code sample based on your code above, but getting compile error on EntityGroup, not sure what that is:

code sample

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(MaterialApp(
    home: LatestRun(),
  ));
}

class LatestRun extends StatelessWidget {
  final EntityGroup group;

  final PolylinePoints polylinePoints = PolylinePoints();
  final Set<Polyline> polylines = {};

  LatestRun({@required this.group});

  @override
  Widget build(BuildContext context) {
    final PolylineId id = PolylineId("poly");
    polylines.add(Polyline(
        width: 3,
        color: Colors.blue,
        polylineId: id,
        points: convertToLatLng(
            polylinePoints.decodePolyline(group.lastRunPolyline))));
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Container(
        width: 150,
        color: Colors.blue,
        padding: EdgeInsets.all(8.0),
        child: Text("Latest runs".toUpperCase()),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              group.lastRunner +
                  " put in " +
                  (group.lastRunDistance / 1000).toStringAsFixed(3) +
                  "km",
              style: TextStyle(fontStyle: FontStyle.italic).copyWith(color: Colors.blue),
            ),
            SizedBox(height: 5),
            SizedBox(
              width: kIsWeb ? 500 : MediaQuery.of(context).size.width,
              height: kIsWeb ? 500 : MediaQuery.of(context).size.width,
              child: GoogleMap(
                  gestureRecognizers: Set()
                    ..add(Factory<PanGestureRecognizer>(
                            () => PanGestureRecognizer())),
                  initialCameraPosition: CameraPosition(
                      target: _getAverageLatLng(polylines.first.points),
                      zoom: 15.0),
                  mapType: MapType.terrain,
                  polylines: polylines,
                  compassEnabled: false,
                  tiltGesturesEnabled: false),
            ),
          ],
        ),
      )
    ]);
  }

  LatLng _getAverageLatLng(List<LatLng> points) {
    final List<double> lats = [];
    points.forEach((element) {
      lats.add(element.latitude);
    });
    final List<double> lons = [];
    points.forEach((element) {
      lons.add(element.longitude);
    });
    return LatLng(lats.reduce((a, b) => a + b) / lats.length,
        lons.reduce((a, b) => a + b) / lons.length);
  }

  List<LatLng> convertToLatLng(List<PointLatLng> points) {
    List<LatLng> result = <LatLng>[];
    for (int i = 0; i < points.length; i++)
      result.add(LatLng(points[i].latitude, points[i].longitude));
    return result;
  }
}

[MarkAlexanderDev]

Sorry, I forgot to provide it. It's a class I use to store data from my API:

class EntityGroup extends GetxController {
  String name = "";
  RxString icon = "👟".obs;
  double targetKm = 10.0;
  String owner = "";
  List accounts = [];

  //last run
  String lastRunPolyline = "";
  String lastRunner = "";
  int lastRunTimestamp = 0;
  double lastRunDistance = 0.0;

  EntityGroup();

  EntityGroup.fromJson(Map<String, dynamic> data, {String key = ""}) {
    fromJson(data, key: key);
  }

  Map<String, dynamic> toMap() {
    return {
      "icon": this.icon.value,
      "targetKm": this.targetKm,
      "owner": this.owner,
      "accounts": this.accounts,
      "lastRunPolyline": this.lastRunPolyline,
      "lastRunner": this.lastRunner,
      "lastRunTimestamp": this.lastRunTimestamp,
      "lastRunDistance": this.lastRunDistance,
    };
  }

  String toJson() {
    return json.encode(toMap());
  }

  bool fromJson(Map<String, dynamic> data, {String key = ""}) {
    if (data == null) return false;
    this.name = key;
    this.icon.value = data["icon"];
    this.targetKm = data["targetKm"];
    this.owner = data["owner"];
    this.accounts.assignAll(data["accounts"]);
    this.lastRunPolyline = data["lastRunPolyline"];
    this.lastRunner = data["lastRunner"];
    this.lastRunTimestamp = data["lastRunTimestamp"];
    this.lastRunDistance = data["lastRunDistance"];
    return true;
  }
}

[darshankawar]

@MarkAlexanderDev
Sorry for going back and forth, but it seems you are using https://pub.dev/packages/get/example 3rd party plugin in your EntityGroup class. Please provide a self-contained code sample that we can directly use.
Thanks.

[MarkAlexanderDev]

Sorry for the late answer @darshankawar, I created a GitHub repository to isolate the issue. You should be able to test it easily: https://github.com/MarkAlexanderDev/google_maps_flutter_web_isuue

/!\ Don't forget to replace the API key of google maps in the AndroidManifest and in the Index.html.

[darshankawar]

Thanks for the repo. I see the same behavior using latest stable version on web.

1. Mobile:

2. Web:

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.2.3 at /Users/dhs/documents/fluttersdk/flutter
    • Framework revision f4abaa0735 (5 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (4 available)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 92.0.4515.107

• No issues found!

Cc: @ditman

[ditman]

I'm going to try and reproduce/minimize this example even further. I suspect it has to do with the polyline points not being in the correct order (and mobile sorting them before painting them), but I'm not sure entirely sure! (something similar happened with polygons and holes)

This might also be an issue with passing the polylines as a prop of the map, and not something added later through the controller, we've had a couple of issues like that in the past with other geometries.

[ditman]

This seems to be a bug in the implementation of package:flutter_polyline_points :: decodePolyline method in the web, see below:

Dammyololade/flutter_polyline_points#40 (comment)

I just applied the workaround above and got this when decoding the string:

I'm going to close this as an issue for flutter_polyline_points, I guess they should fix it in their package!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.