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

For flutter_map >= 6.0.0: google_tile_layer_widget.dart (flutter_map v6)

For flutter_map < 6.0 : google_tile_layer_widget.dart (flutter_map v5)

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 :)

[ibrierley]

As I "think" (haven't had chance to dig into it behind the scenes) this is kind of still using the Google Maps SDK, it may actually be fine with their ToS.

[thomashrabe]

Does this still work? @Ahmed-gubara

[Ahmed-gubara]

@thomashrabe
Yes, i'm actually using it in an App.

It doesn't perform well on android versions older than android 10 (SDK 29).
That is something related to flutter using better android platform integration starting with android 10.
flutter hybrid-composition

So maybe make a fallback to open street map on older android versions.

Widget myTileLayer() {
  int androidSdk = getAndroidVersion(); // using device_info_plus
  if (androidSdk >= 29) { // >= Android 10
    return GoogleMapTileLayer(
      mapType: MapType.hybrid,
    );
  }
  else
  {
    return TileLayer(
      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
      userAgentPackageName: 'com.example.app',
    );
  }
}

I've updated the gist to the code that i'm currently using.
google_tile_layer_widget.dart

The same code will work with apple_maps_flutter as the api is almost identical.

GoogleMap -> AppleMap
GoogleMapController -> AppleMapController

And it work very well on IOS devices .

[thomashrabe]

Thank you for the update. However, I tried it and it seems now that your example is lagging behind. The source file does not contain GoogleMapTileLayerOptions anymore. I think they were in there before?

[Ahmed-gubara]

Just updated the gist and tested with IOS simulator, the code should work normally.
and simplified the example.

It was a simple Container(color: Colors.transparent) at the end of the stack to make gestures captured by flutter_map.

[mohyM]

@Ahmed-gubara thanks for ur GoogleMapTileLayer but after i added markers on the map it when zoom the map it not moving correctly with map

WhatsApp.Video.2023-09-04.at.10.07.26.AM.mp4

please see this video

[Ahmed-gubara]

@mohyM
Unfortunately that is the zoom limit supported by google map itself. CameraUpdateFactory

The only way is to cluster markers that are overlapping.
using any plugin supported by FlutterMap, see marker clustering

and also:
As i see from the video, you didn't disable map rotation as set by the example.
i have found a way to allow google map to rotate correctly without rotating labels and updated the code.
kindly try the updated code and tell me if it's working correctly for you.

[mohyM]

@Ahmed-gubara hi ahmed do u think u can update "GoogleMapTileLayer" class u created before to work fine with flutter_map version > 6.0.0

[Ahmed-gubara]

@mohyM
google_tile_layer_widget.dart
This one is for flutter_map v6.