WEBVTT 00:00.120 --> 00:07.960 When working with Google Maps, you might want to restrict the maps scrollable area to a specific region 00:07.960 --> 00:12.960 or set boundaries beyond which users can't pan. 00:13.120 --> 00:19.400 So in this video, we're going to learn about limiting map bounds in Google Maps. 00:19.440 --> 00:27.040 The common use cases for limiting map bounds include restricting the map to a specific city or region, 00:27.040 --> 00:35.600 preventing users from scrolling away from relevant areas, and creating a focused map experience for 00:35.600 --> 00:37.440 specific locations. 00:37.560 --> 00:47.200 You can start implementing the restrictions using lat long bounds and camera updates, and using the 00:47.240 --> 00:49.640 lat long bounds from Camera target. 00:49.800 --> 00:56.640 Also, you can use another advanced boundary enforcement with smooth correction. 00:56.920 --> 01:00.000 Okay, let me start with the basic approach. 01:00.040 --> 01:05.840 Basic restriction of the maps using the lat long bounds and camera updates. 01:06.200 --> 01:06.680 Okay. 01:06.920 --> 01:14.120 so as in the previous videos, we created a map overlay. 01:14.280 --> 01:16.880 It's called Manhattan Bounce. 01:16.880 --> 01:26.320 So if I want to restrict our map to the Manhattan bounds, which is this is the southwest corner and 01:26.320 --> 01:30.560 this is the northeast corner of Manhattan. 01:30.560 --> 01:38.720 So I want to allow the user only to display the Manhattan bounds and don't get outside this bounds. 01:38.720 --> 01:48.600 So I want to restrict the Google map to this bound and not allowing the user to navigate outside this 01:48.600 --> 01:49.120 bound. 01:49.160 --> 01:51.000 I'll copy this. 01:51.160 --> 01:55.760 I'll cut it from here and outside the Google map. 01:55.800 --> 02:03.640 I'll paste it in order to use it inside the Google map parameters, I'll use a new parameter called 02:03.640 --> 02:04.840 properties. 02:04.880 --> 02:14.320 Properties is a parameter in Google Maps composable that allows us to specify map properties. 02:14.320 --> 02:20.760 And if we click on the map properties, we can access a public class. 02:20.760 --> 02:24.760 Having those parameters is building enabled. 02:24.760 --> 02:26.160 Is indoor enabled. 02:26.160 --> 02:28.800 My location enabled is traffic enabled. 02:28.960 --> 02:36.320 Lat long bounce for camera, target map style options, map type, maximum zoom preference and minimum 02:36.320 --> 02:37.040 zoom preference. 02:37.040 --> 02:43.680 And we talked about this map properties when we specified the map type and the zoom levels. 02:43.720 --> 02:53.720 Now we're going to use the lat long bounds for camera target properties equals to map property and set 02:53.760 --> 02:57.480 here lat long bounds for camera target. 02:57.520 --> 03:00.800 Set the Manhattan bounds run again. 03:00.840 --> 03:02.280 And here we have an error. 03:02.440 --> 03:03.440 Let me check. 03:03.600 --> 03:06.640 An argument is already passed for this parameter. 03:06.960 --> 03:07.480 Oops. 03:07.600 --> 03:11.720 We specify this in the previous videos the map type. 03:11.920 --> 03:15.640 So I can remove it because the map type is the default. 03:15.640 --> 03:23.670 Here, let me run again and check the map properties and the Manhattan bounds if it is set it correctly. 03:23.710 --> 03:30.990 You can notice that it is centered like this as a central of the Manhattan bounds. 03:31.030 --> 03:40.270 Okay, now if we scroll up and down, we can't because it is set it as a bound for a camera target. 03:40.270 --> 03:41.670 We can zoom in. 03:41.830 --> 03:42.230 Okay. 03:42.270 --> 03:46.150 But we can't go outside the Manhattan. 03:46.390 --> 03:50.750 Okay, you can see this is the Manhattan. 03:50.750 --> 03:55.630 We can't scroll outside the Manhattan city. 03:55.790 --> 03:58.870 Okay, you can see the restriction. 03:58.870 --> 04:04.190 We put a restriction here for the Google map. 04:04.230 --> 04:08.270 Okay, so this is the lat long bounds for camera target. 04:08.270 --> 04:13.110 We set it correctly for our Manhattan city okay. 04:13.270 --> 04:13.950 Scroll down. 04:13.950 --> 04:19.990 You can notice that when you scroll and you zoom in the restriction is increased. 04:19.990 --> 04:21.150 So let me check. 04:21.150 --> 04:26.750 Now you can notice that the restriction is still here to this island. 04:26.750 --> 04:28.550 If I scroll down, I can't. 04:28.590 --> 04:29.070 Okay? 04:29.390 --> 04:32.470 And I can't go outside Manhattan. 04:32.510 --> 04:33.790 This is the Manhattan. 04:33.790 --> 04:38.230 This is the bounds, the lat long bounds for camera target. 04:38.230 --> 04:44.750 Also, I can specify the map type in order to check it as we did before. 04:44.990 --> 04:46.230 Let me run again. 04:46.350 --> 04:54.750 Notice that I can't navigate outside America if I scroll down and zoom in, get the New York City. 04:54.790 --> 04:59.670 If I scroll zoom in, I can't go outside Manhattan. 04:59.670 --> 05:04.910 Okay, you notice that I didn't move outside Manhattan. 05:04.950 --> 05:11.870 Okay, this is the beauty and this is the power of Google Map customizations. 05:11.910 --> 05:20.350 Moreover, I can specify more parameters of the map properties like minimum zoom preference like ten 05:20.390 --> 05:24.830 F and the maximum zoom preference like 18 F. 05:24.950 --> 05:31.790 Let me run again and see that the minimum zoom preference would be ten F ten times. 05:32.110 --> 05:43.510 Okay, so if you load the map, I can't go outside the minimum zoom and I can zoom in till a specific 05:43.590 --> 05:45.110 level, which is 18. 05:45.310 --> 05:49.270 As we said before, the maximum zoom level is 21. 05:49.270 --> 05:56.870 So I can't go further till 18 or 19 or 20. 05:56.910 --> 06:05.030 I can only set the maximum zoom preference to 18, and the minimum zoom preference is ten f, which 06:05.030 --> 06:05.950 is this. 06:05.990 --> 06:10.550 Okay, so if I click this minus I can't go outside in New York. 06:10.590 --> 06:19.270 Also if I scroll up to the left or right I can't move outside New York City. 06:19.310 --> 06:19.830 Okay. 06:20.310 --> 06:25.190 This is the power of using restriction in Google Maps. 06:25.350 --> 06:34.230 And this is how we set the minimum and maximum zoom level and allow the user to set the specific bound 06:34.430 --> 06:37.190 that users can't go beyond it.