How do I restrict the bounds of a Google Map in Flutter?

Question

I am using google_maps_flutter package and I need to restrict the scrollable area of a map to a specific area. I have both the SW and NE corners, but I can't figure out how to do it.

I have tried the code below, but it's not working.

uniCampusSW and uniCampusNE are both LatLngs.

_userLocation == null // If user location has not been found
          ? Center(
              // Display Progress Indicator
              child: CircularProgressIndicator(
                backgroundColor: UniColors.primaryColour[500],
              ),
            )
          : GoogleMap(
              // Show Campus Map
              onMapCreated: _onMapCreated,
              initialCameraPosition: // required parameter that sets the starting camera position. Camera position describes which part of the world you want the map to point at.
                  CameraPosition(
                      target: _userLocation, zoom: defaultZoom, tilt: 0.0),
              scrollGesturesEnabled: true,
              tiltGesturesEnabled: true,
              trafficEnabled: false,
              compassEnabled: true,
              rotateGesturesEnabled: true,
              myLocationEnabled: true,
              mapType: _currentMapType,
              zoomGesturesEnabled: true,
              cameraTargetBounds: new CameraTargetBounds(
                new LatLngBounds(
                  northeast: UniCampusNE,
                  southwest: UniCampusSW,
                ),
              ),
            ),

This is the error I get

/flutter (12525): The following assertion was thrown building TheMap(dirty, state: _TheMapState#a8840): I/flutter (12525): 'package:google_maps_flutter/src/location.dart': Failed assertion: line 68 pos 16: I/flutter (12525): 'southwest.latitude <= northeast.latitude': is not true.

thanks

score 2 · Answer 1 · answered Oct 05 '21 at 14:25

Hello friends!

Solution with Null Safety

Note the error: 'southwest.latitude <= northeast.latitude': is not true.

According to documentation, link below:

https://pub.dev/documentation/google_maps_flutter_platform_interface/2.1.2/google_maps_flutter_platform_interface/LatLngBounds-class.html

It is necessary to check if these values are not static, as southwest.latitude must be less than or equal to northeast.latitude, and northeast.longitude must be less than or equal to southwest.longitude.

LatLng? UniCampusNE;
LatLng? UniCampusSW;

var nLat, nLon, sLat, sLon;

if (UniCampusSW!.latitude <= UniCampusNE!.latitude) {

  sLat = UniCampusSW.latitude;
  nLat = UniCampusNE.latitude;

}else{

  sLat = UniCampusNE.latitude;
  nLat = UniCampusSW.latitude;

}
if (UniCampusSW.longitude <= UniCampusNE.longitude) {

  sLon = UniCampusSW.longitude;
  nLon = UniCampusNE.longitude;

}else{

  sLon = UniCampusNE.longitude;
  nLon = UniCampusSW.longitude;
}

And in cameraTargetBounds: you can use the variables you created:

cameraTargetBounds: CameraTargetBounds(
LatLngBounds(
northeast: LatLng(nLat, nLon),
southwest: LatLng(sLat, sLon),
),

score 1 · Accepted Answer · answered Nov 05 '19 at 16:35

1

I was being stupid with this one.

The Lats in the LatLngs I had in UniCampusNE and SW were the wrong way round. Simple as that. The code I posted is correct.

You have to make sure that the south west latitude is less than (further left) than the north east latitude.

answered Nov 05 '19 at 16:35

Andrew Stevenson

578
1
9
23

How can I get bounds? – Hassan Ansari Jan 07 '21 at 16:45
1

Hi @HassanAnsari - I hope you are well. Simply access Google Maps (https://maps.google.com/maps) , navigate to the location you want to work with and and right-click at the specific location. You should be presented with a popup menu that includes the co-ordinates. I hope that helps. – Andrew Stevenson Jan 08 '21 at 11:24
So means I've to separately take the co or donates? – Hassan Ansari Jan 08 '21 at 11:42
Basically yes - Get your co-ordinates and them implement the bounding by using the code above. Make sure you pay attention to the accepted answer too. – Andrew Stevenson Jan 11 '21 at 13:48

score 0 · Answer 3 · answered Feb 28 '21 at 13:13

try this:

void _onMapCreated(GoogleMapController controller) {
_controller.complete(controller);
Future.delayed(
    Duration(milliseconds: 200),
    () => controller.animateCamera(CameraUpdate.newLatLngBounds(
        northeast,southwest,
        1)));

}

score 0 · Answer 4 · answered Dec 09 '22 at 08:21

Based on the this issue for automatically calculate map bounds

 LatLngBounds boundsFromLatLngList(List<LatLng> list) {
    double? x0, x1, y0, y1;
    for (LatLng latLng in list) {
      if (x0 == null || x1 == null || y0 == null || y1 == null) {
        x0 = x1 = latLng.latitude;
        y0 = y1 = latLng.longitude;
      } else {
        if (latLng.latitude > x1) x1 = latLng.latitude;
        if (latLng.latitude < x0) x0 = latLng.latitude;
        if (latLng.longitude > y1) y1 = latLng.longitude;
        if (latLng.longitude < y0) y0 = latLng.longitude;
      }
    }

    return LatLngBounds(northeast: LatLng(x1!, y1!),southwest:  LatLng(x0!, y0!));
  }

How do I restrict the bounds of a Google Map in Flutter?

4 Answers4