Not an issue: using google_maps_flutter tiles with flutter_map

[Ahmed-gubara]

Hi
Just had some time to play with google_maps_flutter package.
I would like to share a code that worked for me to use GoogleMap Widget as a tile layer on flutter_map

gist: google_tile_layer_widget.dart

usage:

Widget build(BuildContext context) {
    return Scaffold(
        body: FlutterMap(
      options: MapOptions(
        center: LatLng(51.5, -0.09),
        maxZoom: 21,
        interactiveFlags:
            InteractiveFlag.pinchZoom | InteractiveFlag.doubleTapZoom | InteractiveFlag.drag | InteractiveFlag.flingAnimation | InteractiveFlag.pinchMove,
        zoom: 13.0,
      ),
      children: [
        GoogleMapTileLayerWidget(options: GoogleMapTileLayerOptions(useAndroidViewSurface: true)),
        MarkerLayerWidget(
            options: MarkerLayerOptions(
          markers: [
            Marker(width: 80.0, height: 80.0, point: LatLng(51.5, -0.09), builder: (ctx) => const FlutterLogo()),
          ],
        )),
      ],
    ));
  }

There is a slight delay while panning, but it can be reduced greatly with useAndroidViewSurface: true

[JaffaKetchup]

Looks interesting, could you make this a plugin?

[Ahmed-gubara]

@JaffaKetchup
Once i get it to work properly i will make it a plugin. currently it's still far from optimal.

I tried using it in my app.
There is delay and lag while panning, not visible on an android 11 device, but clearly visible on an android 6 device.

Both are octa-core CPU with ARM Cortex-A53 cores.

Vehicles are represented using MarkerLayerWidget from flutter_map

Redmi 4x (Snapdragon 435) android 11 Custom ROM

screen-20220127-150556.mp4

Huawei G9 Lite (HiSilicon Kirin 650) android 6 EMUI

video_2022-01-27_10-21-41.mp4

And there are other ways for this to be implemented.
1- We can use GoogleMap Widget with ​liteModeEnabled: true to reduce performance cost

2- We can use googleMapController.takeSnapshot() which will return a Future<Uint8List?> representing the image bytes of the map.
That we can use with Image.memory(Uint8List bytes) as tiles.

I think that is similar to how Leaflet handle google maps tiles, where it uses a google map instance to fetch tiles, and rip it from the DOM tree to use on Leaflet, hopefully this complies with Google's ToS.

[JaffaKetchup]

Not sure about compliance with Google ToS, they probably aren't happy about using their tiles without their SDK?

Either option seems good, ultimately it's your decision! If I had to pick, I would probably pick option 2, because it just feels nicer somehow, and less of a workaround.

Thanks for sharing :)

[JaffaKetchup]

I am going to convert this to a discussion (as I am doing some tidy-up), so be warned that this issue will be locked.