WEBVTT 00:00.120 --> 00:00.960 Welcome back. 00:01.320 --> 00:09.320 In this video, we're going to learn about some useful utilities and tools that Google Maps platform 00:09.320 --> 00:10.120 provide. 00:10.120 --> 00:15.520 First of all, you should go to github.com Google Maps. 00:15.560 --> 00:23.040 You can read about the Google Maps platform tools you can call Web Services APIs for from your preferred 00:23.040 --> 00:23.600 language. 00:23.640 --> 00:26.320 Go, Java, Node.js, and Python. 00:26.360 --> 00:34.280 You can see the utility libraries for JavaScript API, loader language and frameworks support, but 00:34.280 --> 00:37.560 we are interested in Jetpack Compose. 00:37.560 --> 00:43.200 So if we scroll down to the repositories, we can notice Android Maps Compose. 00:43.200 --> 00:51.920 You can see that our Java, Kotlin KTX, Android maps, utils, JavaScript and flutter and so on. 00:51.960 --> 01:00.440 We are interested in Jetpack Compose, so open Android maps compose, and here there are a lot of things 01:00.440 --> 01:01.960 we can implement. 01:01.960 --> 01:06.090 There are some useful things like clustering. 01:06.130 --> 01:08.770 We're going to talk about clustering. 01:08.930 --> 01:12.650 Street view uh metadata check and others. 01:12.890 --> 01:21.530 Also we can include the the widgets library for scale bar for example by using this dependency. 01:21.650 --> 01:24.330 So at first let me start with the scale bar. 01:24.330 --> 01:28.330 And then we'll move to Clustering and Street view. 01:28.650 --> 01:30.690 Copy this implementation. 01:30.730 --> 01:34.130 Google maps compose widget 6.6. 01:34.170 --> 01:40.530 Go to here to the Gradle file and then paste it here. 01:40.570 --> 01:45.610 Correct the implementation sync now and here we go. 01:45.730 --> 01:49.170 Now let's move back to our Google map. 01:49.170 --> 01:50.050 Composable. 01:50.050 --> 01:52.170 And inside the scoop. 01:52.330 --> 01:57.650 We need to implement the scale bar back to Google Maps. 01:57.810 --> 02:05.380 If we scroll down to scale bar, this is the scale bar that I'm talking about in Google Maps when using 02:05.380 --> 02:14.180 Jetpack Compose, a scale bar is a UI element that shows the relationship between distances on the map 02:14.300 --> 02:16.820 and real world distances. 02:17.140 --> 02:22.700 It helps users understand the scale of the map they are viewing. 02:22.860 --> 02:28.900 To add a scale bar in Google Maps with Jetpack Compose, you typically use the Google Map composable 02:28.900 --> 02:31.660 along with the scale bar functionality. 02:31.820 --> 02:36.340 You can use the scale bar or disappearing scale bar. 02:36.460 --> 02:46.500 Let me copy this scale bar with those modifier and camera position state parameters and inside the. 02:46.540 --> 02:51.180 Let me paste it here alt plus enter to import the scale bar. 02:51.340 --> 02:58.060 Because I created and I imported this library the compose widgets. 02:58.100 --> 02:59.540 Let's run and see. 02:59.580 --> 03:00.700 And here we go. 03:00.740 --> 03:03.340 This is our app and it crashes. 03:03.460 --> 03:05.460 Let me check the look at. 03:05.660 --> 03:16.980 And here we have the Android X compose layout node can't be cast to Google Maps Android map node. 03:17.300 --> 03:22.380 This is due to, I think, the wrong placement of the scale bar. 03:22.420 --> 03:26.780 Let me check the documentations and here you can see Google Maps. 03:27.020 --> 03:32.020 This is the scoop of the Google Maps scale bar is outside the Google Maps. 03:32.020 --> 03:38.620 So it's a widget, uh, like an A layer over the Google Maps. 03:38.620 --> 03:46.580 So let me cut this code and let me place it outside the box layout. 03:46.900 --> 03:50.260 You can put it near the surface here. 03:50.420 --> 03:51.260 Scale bar. 03:51.420 --> 03:52.820 Let me test again. 03:52.820 --> 03:57.500 And you notice at the top left we have this bar. 03:57.580 --> 04:00.460 This is the scale bar okay. 04:00.740 --> 04:02.620 So congratulations guys. 04:02.620 --> 04:06.540 We learned about the scale bar we implemented. 04:06.540 --> 04:10.260 And it's very useful in many applications.