I am using google_maps_flutter: ^2.5.3 for my flutter web project which displays google map and marker on map. Marker on map displays on Desktop browsers but not displays on Mobile browser.
Here I have added some useful information.
code snippet
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(() {});
}
}
flutter doctor output
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!
screenshots
Left one is from Desktop browser and Right one is from Mobile browser
Any help would be appreciated. Thank you.