a14n / dart-google-maps

A library to use Google Maps JavaScript API v3 from Dart scripts.
Other
125 stars 63 forks source link

Map not shown in TabBarView after upgrading from flutter version 3.3.10 to 3.7.0 or newer #120

Closed jozes closed 1 year ago

jozes commented 1 year ago

Recently I found that the Google Map is not shown in TabBarView widget after upgrading flutter from version 3.3.10 to 3.7.0 or newer. The code to prepare map is executed but there is nothing displayed.
I have tested this with several different versions and none is showing the map. Any ideas what to do because I would like to upgrade the whole project to latest flutter version.

Here is the code which prepares the map with one polygon and a marker which represents the centroid of the polygon. This code is always executed, however the result is not displayed. The same widget is normally shown in other widgets but not in a TabBarView.

  Widget getMap() {
    String htmlId = "gm-pregled-travnika-${Random().nextInt(1000).toString()}";
    var x = ui.platformViewRegistry.registerViewFactory(
      htmlId,
      (int viewId) {
        MapTypeControlOptions controlOptions = MapTypeControlOptions()
          ..position = ControlPosition.LEFT_BOTTOM;
        final mapOptions = MapOptions()
          ..zoom = 8
          ..center = LatLng(46.074, 14.950)
          ..mapTypeId = 'hybrid'
          ..mapTypeControlOptions = controlOptions;

        final elem = DivElement()
          ..id = htmlId
          ..style.width = "100%"
          ..style.height = "100%"
          ..style.border = 'none';
        geoJsonOptions.idPropertyName = 'gid';
        // create Google map
        gmap = GMap(elem, mapOptions);
        final travnikiStyleOptions = DataStyleOptions()
          ..clickable = true
          ..fillColor = 'red'
          ..strokeColor = 'red'
          ..fillOpacity = 0.1
          ..strokeWeight = 2
          ..zIndex = 2000;

        var travnikiLayer = Data()..map = gmap;
        // prepare fully defined geoJson with the requested travnik
        final geojson =
            '{"type": "FeatureCollection","features": [{"type": "Feature", "geometry":${travnikData["geojson"]},"properties":{"gid": ${travnikData['gid']}}}]}';
        travnikiFeatureList = travnikiLayer.addGeoJson(
            jsify(jsonDecode(geojson)), geoJsonOptions);

        LatLng location = LatLng(travnikData['center_lattitude'] as double,
            travnikData['center_longitude'] as double);
        marker.map = null;

        MarkerOptions options = MarkerOptions()
          ..draggable = false
          ..position = location
          ..zIndex = 2000;

        marker.options = options;
        marker.map = gmap;

        if (gmap != null) {
          gmap!.center = location;
          gmap!.zoom = 18;
        }
        travnikiLayer.set('style', travnikiStyleOptions);

        return elem;
      },
    );
    return HtmlElementView(viewType: htmlId);
  }

The above widget is shown in widget tree like this:

              ....    
              SizedBox(
                    width: ((MediaQuery.of(context).size.width / 2)) - 50,
                    height: 820,
                    child: getMap(),
                  ),
               ....

The map is displayed in flutter 3.3.10.

Screenshot 2023-06-09 at 17 22 35

The map is not displayed in flutter 3.7.0 or newer.

Screenshot 2023-06-09 at 17 16 17
a14n commented 1 year ago

I think this issue is related to flutter and should be reported on Flutter's issues.

Did you try with a simple html

hello world
instead of a gmap ?