Open kalpeshmayani opened 2 weeks ago
darshankawar
commented
2 weeks ago Thanks for the report @kalpeshmayani
but not displays marker in mobile browser
Is this on android chrome or iOS safari ?
Also, can you provide us only minimal but complete reproducible without third party implementation which still shows the reported behavior ?
kalpeshmayani
commented
2 weeks ago Thanks for quick response.
So I am not sure about android mobile browser, but markers not displaying on iOS mobile browser(chrom + safari) for sure. There is no thrid party dependecy added other than google maps in given code. And that what I am having in my code.
darshankawar
commented
2 weeks ago @kalpeshmayani I was mentioning about below custom implementation you have in the code provided:
That's why we request to provide only minimal but complete runnable code that is enough to replicate the reported behavior and you may remove the unnecessary implementations.
kalpeshmayani
commented
1 week ago Ohh, sorry, I though about third party packages. And I updated my code here.
import 'dart:async';
import 'dart:ui' as ui;
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class EventMapWidget extends StatefulWidget {
EventMapWidget({
Key? key,
}) : super(key: key);
@override
_EventMapWidgetState createState() => _EventMapWidgetState();
}
class _EventMapWidgetState extends State<EventMapWidget> {
final Completer<GoogleMapController> _controller = Completer();
Set<Marker> _markers = {};
Set<Circle> _circles = {};
Map<PolylineId, Polyline> _polylines = {};
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
child: AbsorbPointer(
absorbing: true,
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);
},
),
),
],
),
),
);
}
_showLocationOnMap(BuildContext context) async {
final GoogleMapController controller = await _controller.future;
// set marker for event address location
Marker destinationMarker = Marker(
markerId: MarkerId('unique_id'),
position: LatLng(
21.230200,
72.862840,
),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
);
_markers.add(destinationMarker);
controller.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(21.230200, 72.862840),
zoom: 16,
),
),
);
setState(() {});
}
}Thanks for the updated code. Using it, I was able to replicate the reported behavior on mobile web (both, android + chrome and ios + safari).
abigotado
commented
1 week ago I'm experiencing the same issue and have some additional details.
First, here's how I create custom markers from svg:
Future<BitmapDescriptor> getBitmapDescriptorFromSvgAsset(
final BuildContext context,
final String assetName, {
final Size size = const Size.square(30),
final ColorMapper? colorMapper,
}) async {
final ui.FlutterView view = View.of(context);
final PictureInfo pictureInfo = await vg.loadPicture(
SvgAssetLoader(assetName, colorMapper: colorMapper),
context,
);
final double devicePixelRatio = view.devicePixelRatio;
final int width = (size.width * devicePixelRatio).toInt();
final int height = (size.height * devicePixelRatio).toInt();
final double scaleFactor = min(
width / pictureInfo.size.width,
height / pictureInfo.size.height,
);
final ui.PictureRecorder recorder = ui.PictureRecorder();
ui.Canvas(recorder)
..scale(scaleFactor)
..drawPicture(pictureInfo.picture);
final ui.Picture rasterPicture = recorder.endRecording();
final ui.Image image = rasterPicture.toImageSync(width, height);
final ByteData bytes =
(await image.toByteData(format: ui.ImageByteFormat.png))!;
return BitmapDescriptor.fromBytes(bytes.buffer.asUint8List());
}In mobile browsers (Chrome/Safari) it is throwing
Uncaught Unsupported operation: toImageSync is not supported on the HTML backend. Use drawPicture instead, or toImage.So I tried to replace final ui.Image image = rasterPicture.toImageSync(width, height); with final ui.Image image = await rasterPicture.toImage(width, height);
Well, it sometimes works (not always, can't find out in which cases it works, in which not). But it renders markers incorrectly:
Instead of this it renders this
. As you can see - some white frame appears around the picture.
I think the problem is related to the HTML renderer, 'cause the problem disappears, if you use --web-renderer=canvaskit. But with canvaskit the marker becomes larger in mobile browser (in desktop Chrome everything is okay).
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
Code sample
```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 StateScreenshots or Video
Screenshots / Video demonstration
Left one is from Desktop browser and Right one is from Mobile browser
Logs
Logs
```console [Paste your logs here] ```Flutter Doctor output
Doctor output
```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! ```