Center poly line google maps plugin flutter fit to screen google map - google-maps

Question

want to find a center of 2 points and fit a map.
I want to fit for all screen when I view on map.
I draw route ready but it fit to 1 point only. please help me.
this class is for map view for a flutter.
I try to find plugin and solution more day but still not found.
GoogleMap(
mapType: MapType.normal,
markers: _markers,
// cameraTargetBounds: CameraTargetBounds(new LatLngBounds(
// northeast: LatLng(latFrom, logFrom),
// southwest: LatLng(latTo, logTo),
// )),
// minMaxZoomPreference: MinMaxZoomPreference(1, 15),
mapToolbarEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
trafficEnabled: true,
compassEnabled: true,
indoorViewEnabled: true,
rotateGesturesEnabled: true,
tiltGesturesEnabled: true,
myLocationButtonEnabled: true,
myLocationEnabled: true,
polylines: _polyline,
// padding: EdgeInsets.all(20),
initialCameraPosition:
CameraPosition(
target: LatLng(latFrom, logFrom),
zoom: 10,
),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
})

Answer 1

void _setMapFitToTour(Set<Polyline> p) {
double minLat = p.first.points.first.latitude;
double minLong = p.first.points.first.longitude;
double maxLat = p.first.points.first.latitude;
double maxLong = p.first.points.first.longitude;
p.forEach((poly) {
poly.points.forEach((point) {
if(point.latitude < minLat) minLat = point.latitude;
if(point.latitude > maxLat) maxLat = point.latitude;
if(point.longitude < minLong) minLong = point.longitude;
if(point.longitude > maxLong) maxLong = point.longitude;
});
});
mapController.moveCamera(CameraUpdate.newLatLngBounds(LatLngBounds(
southwest: LatLng(minLat, minLong),
northeast: LatLng(maxLat,maxLong)
), 20));
}

Answer 2

google_maps_flutter: ^0.5.30
flutter_polyline_points: ^0.2.2
Make sure you have used .then() function because setPolyline() is the async function and has the await keyword.
Use these dependencies
class ShowMap extends StatefulWidget {
ShowMap({Key key}) : super(key: key);
#override
_ShowMapState createState() => _ShowMapState();
}
class _ShowMapState extends State<ShowMap> {
GoogleMapController _googleMapController;
Set<Polyline> _polylines = {};
List<LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints = PolylinePoints();
String googleAPIKey = "YOUR_API_KEY_HERE";
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: ColorUtils.bluePrimary,
appBar: AppBar(
// automaticallyImplyLeading: false,
backgroundColor: ColorUtils.greenPrimary,
title: Center(
child: Column(
children: [
Text(
'Delivery Accepted! ',
style: TextStyle(fontSize: 18.0, letterSpacing: -0.3333),
),
],
),
),
),
body: Column(
children: [
Expanded(
flex: 5,
child: Center(
child: Container(
margin: EdgeInsets.only(top: 10),
decoration: BoxDecoration(
// color: Colors.white,
),
width: MediaQuery.of(context).size.width - 10,
height: MediaQuery.of(context).size.height * 0.5,
child: GoogleMap(
cameraTargetBounds: CameraTargetBounds.unbounded,
initialCameraPosition: _initialPosition,
onMapCreated: _onMapCreated,
tiltGesturesEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
// trafficEnabled: true,
polylines: _polylines),
),
),
),
),
],
),
);
}
static final CameraPosition _initialPosition = CameraPosition(
// bearing: 192.8334901395799,
target: LatLng(31.5204, 74.3587),
zoom: 12);
void _onMapCreated(GoogleMapController controller) async {
setState(() {
_googleMapController = controller;
setPolylines().then((_) => _setMapFitToTour(_polylines));
});
}
void _setMapFitToTour(Set<Polyline> p) {
double minLat = p.first.points.first.latitude;
double minLong = p.first.points.first.longitude;
double maxLat = p.first.points.first.latitude;
double maxLong = p.first.points.first.longitude;
p.forEach((poly) {
poly.points.forEach((point) {
if (point.latitude < minLat) minLat = point.latitude;
if (point.latitude > maxLat) maxLat = point.latitude;
if (point.longitude < minLong) minLong = point.longitude;
if (point.longitude > maxLong) maxLong = point.longitude;
});
});
_googleMapController.animateCamera(CameraUpdate.newLatLngBounds(
LatLngBounds(
southwest: LatLng(minLat, minLong),
northeast: LatLng(maxLat, maxLong)),
20));
}
setPolylines() async {
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
googleAPIKey,
PointLatLng(31.5204, 74.3587),
PointLatLng(31.4504, 74.1350),
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
} else {
print("--address not found ---");
}
setState(() {
Polyline polyline = Polyline(
polylineId: PolylineId("poly"),
color: Color.fromARGB(255, 40, 122, 198),
width: 5,
points: polylineCoordinates);
_polylines.add(polyline);
});
}
}

Answer 3

Today I got the same problem and I stumbled upon your question. Looking through the answers while implementing i found a simpler approach.
The LatLangBounds class has a method in there called .fromPoint(List<LatLng> points) which takes a list of points and returns the bounds.
I used this with the MapController class and it worked perfectly showing the bounds on the map. Per my understanding of GoogleMapController it should work.
mapController.fitBounds(LatLngBounds.fromPoints(list_of_points));
Ideally this should be what the google map equivalent should be
googleMapController.moveCamera(
CameraUpdate.newLatLngBounds(
LatLngBounds.fromPoints(list_of_points)
),zoomIndex)
);
The .fromPoints(List<LatLng> points) method does what everyone has virtually implemented. Hopefully this helps anyone who needs it.

Answer 4

Today I got the same problem and I stumbled upon your question. And I found two links that can help.
https://medium.com/flutter-community/drawing-route-lines-on-google-maps-between-two-locations-in-flutter-4d351733ccbe
https://stackoverflow.com/a/55990256/1537413
after combine these two links, I get perfect solution.
Here you go.
import 'dart:async';
import 'package:app/env.dart';
import 'package:flutter/material.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class RoutePage extends StatefulWidget {
#override
_RoutePageState createState() => _RoutePageState();
}
class _RoutePageState extends State<RoutePage> {
Completer<GoogleMapController> _controller = Completer();
GoogleMapController mapController;
final Set<Marker> _markers = {};
Set<Polyline> _polylines = {};
List<LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints = PolylinePoints();
String googleAPIKey = GOOGLE_MAPS_API_KEY;
static LatLng sourceLocation = LatLng(42.7477863, -71.1699932);
static LatLng destLocation = LatLng(42.6871386, -71.2143403);
void _onMapCreated(GoogleMapController controller) async {
mapController = controller;
_controller.complete(controller);
LatLng temp;
if (sourceLocation.latitude > destLocation.latitude) {
temp = sourceLocation;
sourceLocation = destLocation;
destLocation = temp;
}
LatLngBounds bound =
LatLngBounds(southwest: sourceLocation, northeast: destLocation);
BitmapDescriptor sourceIcon = await BitmapDescriptor.fromAssetImage(
ImageConfiguration(devicePixelRatio: 2.5), 'assets/driving_pin.png');
BitmapDescriptor destinationIcon = await BitmapDescriptor.fromAssetImage(
ImageConfiguration(devicePixelRatio: 2.5),
'assets/destination_map_marker.png');
setState(() {
_markers.clear();
addMarker(sourceLocation, "Madrid", "5 Star Rating", icon: sourceIcon);
addMarker(destLocation, "Barcelona", "7 Star Rating",
icon: destinationIcon);
});
CameraUpdate u2 = CameraUpdate.newLatLngBounds(bound, 50);
this.mapController.animateCamera(u2).then((void v) {
check(u2, this.mapController);
});
}
void addMarker(LatLng mLatLng, String mTitle, String mDescription,
{BitmapDescriptor icon}) {
_markers.add(Marker(
markerId: MarkerId(
(mTitle + "_" + _markers.length.toString()).toString()), //must unique
position: mLatLng,
infoWindow: InfoWindow(
title: mTitle,
snippet: mDescription,
),
icon: icon,
));
}
void check(CameraUpdate u, GoogleMapController c) async {
c.animateCamera(u);
mapController.animateCamera(u);
LatLngBounds l1 = await c.getVisibleRegion();
LatLngBounds l2 = await c.getVisibleRegion();
print(l1.toString());
print(l2.toString());
if (l1.southwest.latitude == -90 || l2.southwest.latitude == -90)
check(u, c);
else {
await setPolylines();
}
}
void _onCameraMove(CameraPosition position) {}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Maps Sample App'),
backgroundColor: Colors.green[700],
),
body: GoogleMap(
myLocationEnabled: true,
compassEnabled: true,
tiltGesturesEnabled: false,
markers: _markers,
polylines: _polylines,
mapType: MapType.normal,
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: sourceLocation,
zoom: 13.0,
),
onCameraMove: _onCameraMove,
),
),
);
}
setPolylines() async {
List<PointLatLng> result = await polylinePoints?.getRouteBetweenCoordinates(
googleAPIKey,
sourceLocation.latitude,
sourceLocation.longitude,
destLocation.latitude,
destLocation.longitude);
if (result.isNotEmpty) {
result.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
}
setState(() {
Polyline polyline = Polyline(
polylineId: PolylineId("poly"),
color: Color.fromARGB(255, 40, 122, 198),
points: polylineCoordinates);
_polylines.add(polyline);
});
}
}