Repository: flutter
Issue: google_maps_flutter web displays marker on map in desktop browser, but not displays marker in mobile browser
Labels: p: maps,platform-web,package,e: web_html,has reproducible steps,P3,browser: safari-ios,browser: chrome-android,team-web,triaged-web,found in release: 3.19,found in release: 3.22

### Steps to reproduce

google_maps_flutter web displays marker on map in desktop browser, but not displays marker in mobile browser

### Expected results

markers should display in both browsers

### Actual results

markers on map displays only on desktop browser but not in mobile browser

### Code sample

<details open><summary>Code sample</summary>

```dart
import 'dart:async';
import 'dart:developer';

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:venziappweb/common/const.dart';
import 'package:venziappweb/common/utils.dart';

import '../../common/size_config.dart';

class EventMapWidget extends StatefulWidget {
  EventMapWidget({
    Key? key,
    required this.eventLocation,
    required this.mapStyle,
    required this.duration,
  }) : super(key: key);

  final Position eventLocation;
  final String mapStyle;
  final String duration;

  @override
  _EventMapWidgetState createState() => _EventMapWidgetState();
}

class _EventMapWidgetState extends State<EventMapWidget> {
  final Completer<GoogleMapController> _controller = Completer();

  late Position _eventLocation;
  late String _mapStyle;

  Set<Marker> _markers = {};
  Set<Circle> _circles = {};
  Map<PolylineId, Polyline> _polylines = {};

  late String _duration;

  @override
  void initState() {
    super.initState();
    log("--- ${widget.eventLocation.toString()}");
    _eventLocation = widget.eventLocation;
    _mapStyle = widget.mapStyle;
    _duration = widget.duration;
  }

  @override
  void didUpdateWidget(EventMapWidget oldWidget) {
    _duration = widget.duration;
    super.didUpdateWidget(oldWidget);
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.all(
        Radius.circular(SizeConfig.getSize(5)),
      ),
      child: AbsorbPointer(
        absorbing: true, // set true to disable user interaction
        child: Stack(
          children: <Widget>[
            Positioned(
              child: GoogleMap(
                initialCameraPosition:
                const CameraPosition(target: LatLng(0.0, 0.0)),
                myLocationButtonEnabled: false,
                zoomGesturesEnabled: false,
                zoomControlsEnabled: false,
                rotateGesturesEnabled: false,
                scrollGesturesEnabled: false,
                tiltGesturesEnabled: false,
                circles: Set<Circle>.from(_circles),
                markers: Set<Marker>.from(_markers),
                polylines: Set<Polyline>.of(_polylines.values),
                gestureRecognizers: Set()
                  ..add(Factory<PanGestureRecognizer>(
                      () => PanGestureRecognizer()))
                  ..add(Factory<ScaleGestureRecognizer>(
                      () => ScaleGestureRecognizer()))
                  ..add(Factory<TapGestureRecognizer>(
                      () => TapGestureRecognizer()))
                  ..add(Factory<VerticalDragGestureRecognizer>(
                      () => VerticalDragGestureRecognizer()))
                  ..add(Factory<HorizontalDragGestureRecognizer>(
                      () => HorizontalDragGestureRecognizer()))
                  ..add(Factory<OneSequenceGestureRecognizer>(
                      () => EagerGestureRecognizer())),
                onMapCreated: (GoogleMapController controller) async {
                  _controller.complete(controller);
                  _showLocationOnMap(context);
                },
              ),
            ),
            Positioned(
              bottom: 0,
              child: Container(
                width: SizeConfig.getSize(182),
                height: SizeConfig.getSize(44.2),
                alignment: Alignment.center,
                padding: EdgeInsets.fromLTRB(
                  SizeConfig.getSize(8),
                  SizeConfig.getSize(15),
                  SizeConfig.getSize(8),
                  SizeConfig.getSize(8),
                ),
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(walkDistanceBgImage),
                    fit: BoxFit.cover,
                  ),
                ),
                child: Row(
                  children: <Widget>[
                    Image.asset(
                      clockIcon,
                      width: SizeConfig.getSize(20.98),
                      height: SizeConfig.getSize(20.98),
                    ),
                    SizedBox(width: SizeConfig.getSize(8)),
                    Expanded(
                      child: Text(
                        _duration,
                        style: GoogleFonts.montserrat(
                          fontSize: SizeConfig.getSize(16),
                          fontWeight: FontWeight.w400,
                          color: colorWhiteWithOpacity87,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  _showLocationOnMap(BuildContext context) async {
    final GoogleMapController controller = await _controller.future;

    controller.setMapStyle(
        await DefaultAssetBundle.of(context).loadString(_mapStyle));

    // set marker for event address location
    Uint8List destinationIcon =
        await getBytesFromAsset(venziPinIcon, (SizeConfig.getSize(36)).ceil());
    Marker destinationMarker = Marker(
      markerId: MarkerId('$_eventLocation'),
      position: LatLng(
        _eventLocation.latitude,
        _eventLocation.longitude,
      ),
      icon: BitmapDescriptor.fromBytes(destinationIcon),
      // icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
    );

    _markers.add(destinationMarker);

    controller.animateCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(
          target: LatLng(_eventLocation.latitude, _eventLocation.longitude),
          zoom: 16,
        ),
      ),
    );

    setState(() {});
  }
}
```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>

<summary>Left one is from Desktop browser and Right one is from Mobile browser</summary>

<img width="727" alt="Screenshot 2024-04-29 at 8 17 53 PM" src="https://github.com/flutter/flutter/assets/14196065/e13aa7dd-88d5-48c8-9c86-f218b57ccfb4">

</details>


### Logs

<details open><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.2, on macOS 14.3.1 23D60 darwin-arm64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

```

</details>