WEBVTT 00:00.120 --> 00:01.040 Welcome back. 00:01.080 --> 00:04.520 Let's continue with the places API integration. 00:04.720 --> 00:11.280 Start by var query or places query by. 00:11.280 --> 00:15.560 Remember mutable state of empty string. 00:15.720 --> 00:19.160 The second variable is called predictions. 00:19.200 --> 00:21.440 So predictions by. 00:21.480 --> 00:26.360 Remember it's of type mutable state of empty. 00:27.520 --> 00:35.760 And we need to specify a new type of variables here which is autocomplete prediction. 00:35.760 --> 00:39.600 So list of autocomplete prediction. 00:39.640 --> 00:48.200 This line of code in Jetpack Compose used to manage a list of autocomplete predictions. 00:48.200 --> 00:56.960 For example, search suggestions from the Google Places API in a way that automatically updates the 00:56.960 --> 00:59.440 UI when the data changes. 00:59.520 --> 01:09.990 Here we are declaring a variable called predictions that suggests locations as the user types and by 01:09.990 --> 01:17.350 remember, remember retains the value across composable recomposition keeps state alive when the UI 01:17.390 --> 01:18.190 refreshes. 01:18.350 --> 01:22.310 Mutable state of makes the variable observable. 01:22.350 --> 01:29.430 Changes to predictions will automatically trigger a decomposition of the UI and initial value. 01:29.470 --> 01:33.590 Empty list starts with an empty list. 01:33.830 --> 01:41.990 List of autocomplete prediction A list of autocomplete predictions, for example place names addresses 01:42.030 --> 01:44.710 returned by the places API. 01:44.910 --> 01:50.790 Okay, so this is the main purpose behind creating this type of variables. 01:50.830 --> 01:55.830 The third variable var selected place by. 01:56.070 --> 02:00.430 Remember mutable type mutable state of. 02:00.670 --> 02:02.070 Start with null. 02:02.270 --> 02:08.150 And here we can create a new type of variables called place. 02:08.310 --> 02:14.390 So this type is imported from the places API. 02:14.630 --> 02:19.860 You can see if I hover the mouse that places variable. 02:19.900 --> 02:20.460 Okay. 02:20.860 --> 02:25.020 So we import it from API modal place. 02:25.020 --> 02:28.380 Now let's move to the Google map scoop. 02:28.740 --> 02:36.380 So here before geocoding we can use our places API. 02:36.500 --> 02:40.300 Let's start by selecting the place.lat. 02:40.420 --> 02:43.580 And here the variable is place. 02:43.580 --> 02:46.260 The parameter is a place. 02:46.460 --> 02:51.780 Then we need to make a place.lat long. 02:52.020 --> 02:54.820 From lat long we can get. 02:54.860 --> 03:06.300 If it is not null then go and create a marker or we can directly use this marker state okay state marker 03:06.460 --> 03:10.980 state and the position is place.lat long. 03:11.020 --> 03:15.180 Or we can directly use lat long. 03:15.420 --> 03:21.340 The name is placed dot name and the snippet is place dot address. 03:21.340 --> 03:26.170 So this is our places API implementation in Google Map. 03:26.330 --> 03:31.570 Now click on this in order to get the scope of Google Map. 03:31.850 --> 03:37.530 And outside this box scroll down until here. 03:37.610 --> 03:42.250 Here we need to create or outside the box. 03:42.250 --> 03:44.770 We need to create inside the box. 03:44.770 --> 03:45.290 Sorry. 03:45.330 --> 03:52.490 And under the Google map scope here places api ui overlay. 03:52.650 --> 03:55.970 Start with colon inside this colon. 03:56.290 --> 04:01.090 We need to create a text field and lazy colon. 04:01.290 --> 04:07.970 So let's start with modifier dot padding 16 dp. 04:08.250 --> 04:13.330 And inside the scope of this colon start with a text field. 04:14.490 --> 04:16.330 Setting the value equals. 04:16.330 --> 04:22.250 To query on value change we need to set places query. 04:22.290 --> 04:23.210 Don't miss it. 04:23.410 --> 04:33.810 The on value change we need to start with the new query lambda expression, set the search query to 04:33.850 --> 04:34.290 it. 04:34.330 --> 04:45.330 If new query dot length greater than two, then what we need to do go and execute a new val request 04:45.370 --> 04:57.810 equals to find autocomplete predictions request dot builder dot set query pass in new query and then 04:57.850 --> 05:00.170 use the build function. 05:00.170 --> 05:01.770 What we've done here. 05:01.890 --> 05:08.650 This code constructs a request object to fetch autocomplete predictions. 05:08.650 --> 05:12.490 Search suggestions from the Google Places API. 05:12.970 --> 05:18.410 The purpose is used to search for places as the user types. 05:18.410 --> 05:33.370 For example, if the user types uh p a r, so it will give him Paris, France or Park Avenue in New 05:33.410 --> 05:33.850 York. 05:34.250 --> 05:37.200 Okay, so this is the prediction. 05:37.200 --> 05:44.000 This is how we get the data from the user and predicts the autocomplete. 05:44.000 --> 05:49.960 And the text returns a list of autocomplete prediction objects. 05:50.240 --> 05:52.120 Place suggestions. 05:52.160 --> 05:57.000 Okay, so find autocomplete prediction request. 05:57.000 --> 06:00.200 Creates a builder to configure the request. 06:00.280 --> 06:05.680 Set the query sets the search query, for example text from a text field. 06:05.680 --> 06:14.200 In this case and build function finalizes and constructs the immutable request object. 06:14.240 --> 06:14.720 Okay. 06:14.920 --> 06:23.120 So again guys, if the user types p a r, the app will give him two suggestions. 06:23.120 --> 06:30.520 Even the either Park Avenue in New York or Paris in France. 06:30.640 --> 06:43.200 Okay, then we need to get and induce this, uh, this request in order to find the autocomplete prediction 06:43.200 --> 06:43.880 request.