Want to zoom between two Google map markers in flutter? To zoom between two Lat Lng bounds in google map, you can do as below:
First of all import below library in pubspec.yaml otherwise with the older version, you might not be able to see “getVisibleRegion()” method with google map controller.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import 'dart:async'; import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { Completer<GoogleMapController> _controller = Completer(); GoogleMapController mapController; LatLng _lastMapPosition = _center; static const LatLng _center = const LatLng(45.521563, -122.677433); final Set<Marker> _markers = {}; void _onMapCreated(GoogleMapController controller) { mapController = controller; _controller.complete(controller); LatLng latLng_1 = LatLng(40.416775, -3.70379); LatLng latLng_2 = LatLng(41.385064, 2.173403); LatLngBounds bound = LatLngBounds(southwest: latLng_1, northeast: latLng_2); setState(() { _markers.clear(); addMarker(latLng_1, "Madrid", "5 Star Rating"); addMarker(latLng_2, "Barcelona", "7 Star Rating"); }); 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){ _markers.add(Marker( // This marker id can be anything that uniquely identifies each marker. markerId: MarkerId((mTitle + "_" + _markers.length.toString()).toString()), position: mLatLng, infoWindow: InfoWindow( title: mTitle, snippet: mDescription, ), icon: BitmapDescriptor.defaultMarker, )); } 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); } void _onCameraMove(CameraPosition position) { _lastMapPosition = position.target; } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Maps Sample App'), backgroundColor: Colors.green[700], ), body: GoogleMap( markers: _markers, onMapCreated: _onMapCreated, initialCameraPosition: CameraPosition( target: _center, zoom: 11.0, ), onCameraMove: _onCameraMove, ), ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
