Menu
I want to put all markers in the center of maps with fit zoom to device size below is the code what I have done. I'm using google_maps_flutter: ^0.5.18 to develop a basic 'multiple markers on a google map' type Flutter screen
I Will just create Map of the marker and convert it to set and then I just pass it to Google map widget
import 'dart:async';
import 'dart:math';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/utils/AppConstants.dart';
import 'package:flutter_app/utils/AppDimens.dart';
import 'package:flutter_app/utils/CommonColors.dart';
import 'package:flutter_app/utils/CommonUtils.dart';
import 'package:flutter_app/utils/networ_util.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:location/location.dart';
import 'package:screen/screen.dart';
class BusTrackingMap extends StatefulWidget {
static String tag = "bus-tracking-page";
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _BusTrackingMapState();
}
}
class _BusTrackingMapState extends State<BusTrackingMap>
with TickerProviderStateMixin {
static String homeMarkerId = "101";
static String schoolMarkerId = "102";
static String driverMarkerId = "103";
static String polyLineId = "104";
String apiKey = "";
bool isFirstTimeCall = false, myLocationEnabled = true;
Timer timer;
/*map varibles*/
static LatLng schoolLatLong = new LatLng(23.027115, 72.552368);
static LatLng homeLatLong = new LatLng(23.023705, 72.538546);
static LatLng driverLatLong = new LatLng(23.024311, 72.548505);
Set<Marker> markerSet = new Set();
List<Marker> markerList = new List();
Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
Marker schoolMarker = new Marker(
markerId: new MarkerId(schoolMarkerId),
position: schoolLatLong,
infoWindow: InfoWindow(title: "Parents Location", snippet: ""),
icon: BitmapDescriptor.fromAsset("images/ic_school.png"));
Marker homeMarker = new Marker(
markerId: new MarkerId(homeMarkerId),
position: homeLatLong,
infoWindow: InfoWindow(title: "School Location", snippet: ""),
icon: BitmapDescriptor.fromAsset("images/ic_hhome.png"));
Marker driverMarker = new Marker(
markerId: new MarkerId(driverMarkerId),
position: driverLatLong,
infoWindow: InfoWindow(title: "Driver Location", snippet: ""),
icon: BitmapDescriptor.fromAsset("images/ic_bus.png"));
final Set<Polyline> polylineSet = new Set();
Polyline polyline;
List<LatLng> _latLongList = new List();
// LatLng driverLatLong=new LatLng(23.028712, 72.570227);
Completer<GoogleMapController> _controller = Completer();
GoogleMapController _mapController;
static CameraPosition _initialCamera = CameraPosition(
target: driverLatLong,
zoom: 14,
);
/*location update varible*/
BuildContext mContext;
CameraPosition _currentCameraPosition;
StreamSubscription<LocationData> _locationSubscription;
Location _locationService = new Location();
bool _permission = false;
String error;
LocationData _startLocation;
LocationData _currentLocation;
/*widget varibles*/
GoogleMap googleMap;
Scaffold scaffold;
BitmapDescriptor icon;
AnimationController rotationController;
@override
void initState() {
// TODO: implement initState
super.initState();
rotationController = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);
initPlatformState();
requestPermission();
addMarker();
addMarkerAndPolyLine();
refreshLocationDelay();
// apiCallEveryInterval();
}
keepPhoneWake() async {
double brightness = await Screen.brightness;
Screen.setBrightness(0.5);
bool isKeptOn = await Screen.isKeptOn;
Screen.keepOn(true);
}
apiCallEveryInterval() {
const oneSecond = const Duration(seconds: 20);
timer = new Timer.periodic(oneSecond, (Timer t) => fetchDriverLocation());
BitmapDescriptor.fromAssetImage(
ImageConfiguration(size: Size(48, 48)), "images/ic_hhome.png")
.then((onValue) {
icon = onValue;
});
}
refreshLocationDelay() {
rotationController.forward(from: 0.0);
var _duration = new Duration(seconds: 1);
return new Timer(_duration, refreshLocation);
}
void addMarker() {
markers[schoolMarker.markerId] = schoolMarker;
markers[homeMarker.markerId] = homeMarker;
markers[driverMarker.markerId] = driverMarker;
markerSet = Set<Marker>.of(markers.values);
}
void addMarkerAndPolyLine() {
String encode =
"m{siCmn{{LmAG?b@?bCBRb@p@hBdCfCfDnAtA|BvAxF|DlDdCb@T^Z`Ax@XV^r@fAnB|BbE|@dAnZiX`GiFzAsA|AkAfBqAtBeBxC}Bn@g@b@SVCd@@d@J\Nr@^pAx@j@f@vBpBlCpCtAbB^^d@Z^L^Bd@CJAZvDPIDEl@y@N[t@_CdA_DbAyDt@{AP[t@y@jCaCpCwBdAm@`@QfC_@jB[jOsBlEKlKIrA@l@dAx@fB`Ao@LI\En@GN@JA~@YhA_@ZSPOFIjE^nBLrBXbKlBfQfEjAb@`Af@~B`BtIxH~D|EtFjHnBoBjFaFhBiBTYZo@J[";
getRoutes();
NetworkUtil networkUtil = new NetworkUtil();
_latLongList = networkUtil.decodePolyline(encode);
polyline = new Polyline(
polylineId: PolylineId(polyLineId),
points: _latLongList,
color: CommonColors.primaryColor,
width: 10,
visible: true);
polylineSet.add(polyline);
}
void getRoutes(){
if (!isFirstTimeCall) {
NetworkUtil networkUtil = new NetworkUtil();
String url = "origin=" +
schoolLatLong.latitude.toString() +
"," +
schoolLatLong.longitude.toString() +
"&destination=" +
homeLatLong.latitude.toString() +
"," +
homeLatLong.longitude.toString() +
"&key=" +
apiKey;
networkUtil.get(url).then((latLongList) {
_latLongList = latLongList;
});
isFirstTimeCall = true;
print("Locaton Updated");
}
}
@override
Widget build(BuildContext context) {
buildView();
return scaffold;
}
void buildView() {
final toolbar = new Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
alignment: Alignment.center,
height: 24,
width: 24,
margin: EdgeInsets.only(left: 0, right: 0),
padding: EdgeInsets.all(0),
child: Icon(
Icons.arrow_back_ios,
color: CommonColors.primaryColor,
),
)),
Container(
padding: EdgeInsets.only(left: 30, right: 5),
alignment: Alignment.centerLeft,
child: Material(
color: Colors.transparent,
child: Text(AppConstants.track_bus,
style: TextStyle(
fontFamily: AppConstants.FONT_FAMILY,
fontSize: AppDimens.appBarTitleSize,
fontWeight: FontWeight.w500,
color: CommonColors.primaryColor)),
),
)
],
);
googleMap = GoogleMap(
rotateGesturesEnabled: true,
scrollGesturesEnabled: true,
gestureRecognizers: Set()
..add(Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
..add(Factory<ScaleGestureRecognizer>(() => ScaleGestureRecognizer()))
..add(Factory<TapGestureRecognizer>(() => TapGestureRecognizer()))
..add(Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer())),
mapType: MapType.normal,
myLocationEnabled: myLocationEnabled,
myLocationButtonEnabled: true,
zoomGesturesEnabled: true,
markers: markerSet,
polylines: polylineSet,
minMaxZoomPreference: MinMaxZoomPreference.unbounded,
initialCameraPosition: _initialCamera,
onMapCreated: (GoogleMapController googleMapController){
_mapController=googleMapController;
_controller.complete(googleMapController);
},
);
final mapView = Container(
height: double.infinity,
width: MediaQuery.of(context).size.width,
child: googleMap,
);
scaffold = Scaffold(
appBar: AppBar(
title: toolbar,
backgroundColor: CommonColors.appBarColor,
automaticallyImplyLeading: false,
),
body: Builder(
builder: (BuildContext context) {
mContext = context;
return mapView;
},
),
floatingActionButton: new Align(
alignment: Alignment.bottomRight,
child: new FloatingActionButton(
child: new Center(
child: RotationTransition(
turns:
Tween(begin: 0.0, end: 1.0).animate(rotationController),
child: Icon(
Icons.refresh,
color: Colors.white,
),
),
),
onPressed: () {
refreshLocation();
})),
);
}
/*update location and map*/
initPlatformState() async {
await _locationService.changeSettings(
accuracy: LocationAccuracy.HIGH, interval: 1000);
LocationData location;
// Platform messages may fail, so we use a try/catch PlatformException.
try {
bool serviceStatus = await _locationService.serviceEnabled();
// print("Service status: $serviceStatus");
if (serviceStatus) {
_permission = await _locationService.requestPermission();
// print("Permission: $_permission");
if (_permission) {
location = await _locationService.getLocation();
_locationSubscription = _locationService
.onLocationChanged()
.listen((LocationData result) async {
_currentCameraPosition = CameraPosition(
target: LatLng(result.latitude, result.longitude), zoom: 14);
final GoogleMapController controller = await _controller.future;
controller.animateCamera(
CameraUpdate.newCameraPosition(_currentCameraPosition));
if (mounted) {
setState(() {
_currentLocation = result;
if (_currentCameraPosition != null)
_initialCamera = _currentCameraPosition;
});
}
});
}
} else {
bool serviceStatusResult = await _locationService.requestService();
// print("Service status activated after request: $serviceStatusResult");
if (serviceStatusResult) {
initPlatformState();
}
}
} catch (e) {
// print(e);
if (e.code == 'PERMISSION_DENIED') {
error = e.message;
} else if (e.code == 'SERVICE_STATUS_ERROR') {
error = e.message;
}
location = null;
}
setState(() {
_startLocation = location;
});
}
dynamic refreshLocation() async {
if (_locationSubscription != null) {
_locationSubscription.cancel();
await _locationService.changeSettings(
accuracy: LocationAccuracy.BALANCED, interval: 1000);
_locationSubscription =
_locationService.onLocationChanged().listen((LocationData result) {
print("SchoolEasy Location" + result.longitude.toString());
Scaffold.of(mContext).showSnackBar(SnackBar(
backgroundColor: Colors.blue,
content: new Text('Location Updated' + result.longitude.toString()),
));
homeMarker = new Marker(
markerId: new MarkerId(homeMarkerId),
position: LatLng(result.latitude, result.longitude),
icon: icon,
infoWindow:
InfoWindow(title: "ParentLocation Location", snippet: "snippets"),
);
if (mounted) {
setState(() {
_currentLocation = result;
// driverLatLong = new LatLng(result.latitude, result.longitude);
markers[homeMarker.markerId] = homeMarker;
markerSet = Set<Marker>.of(markers.values);
myLocationEnabled = false;
rotationController.stop(canceled: true);
if (_currentCameraPosition != null)
_initialCamera = _currentCameraPosition;
});
}
});
} else {
refreshLocationDelay();
}
}
/*location permission handling */
/*request permission if not allowed*/
Future requestPermission() async {
// print("permission requested");
Map<PermissionGroup, PermissionStatus> permissions =
await PermissionHandler()
.requestPermissions([PermissionGroup.location]);
}
/*check location service status*/
/*Future<int> checkingServiceStatus() async {
ServiceStatus serviceStatus =
await PermissionHandler().checkServiceStatus(PermissionGroup.location);
return serviceStatus.value;
}
Future<bool> requestRationalPermission() async {
bool isShown = await PermissionHandler()
.shouldShowRequestPermissionRationale(PermissionGroup.location);
return isShown;
}*/
Future<int> checkPermission() async {
PermissionStatus permission = await PermissionHandler()
.checkPermissionStatus(PermissionGroup.location);
return permission.value;
}
dynamic fetchDriverLocation() {
// print("location fetching");
}
@override
void dispose() {
super.dispose();
if (timer != null) {
timer.cancel();
}
}
}
299
This works fine for me. Have dart:math also imported for max, min functions.
import 'dart:math';
LatLngBounds getBounds(List<Marker> markers) {
var lngs = markers.map<double>((m) => m.position.longitude).toList();
var lats = markers.map<double>((m) => m.position.latitude).toList();
double topMost = lngs.reduce(max);
double leftMost = lats.reduce(min);
double rightMost = lats.reduce(max);
double bottomMost = lngs.reduce(min);
LatLngBounds bounds = LatLngBounds(
northeast: LatLng(rightMost, topMost),
southwest: LatLng(leftMost, bottomMost),
);
return bounds;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
