WEBVTT 00:00.080 --> 00:01.000 Welcome back. 00:01.280 --> 00:08.320 We created the geocode address function that takes three parameters context, address and on result. 00:08.360 --> 00:13.720 End result is a lambda expression taking lat long into a parameter and returns nothing. 00:13.960 --> 00:21.480 Also we created the four variables search, query, location, address, and coroutine scope. 00:21.520 --> 00:24.680 We use the location and address variables. 00:24.720 --> 00:28.040 Now let's use search query and coroutine scope. 00:28.360 --> 00:34.920 Let's design the user interface for the geocoding um panel. 00:35.040 --> 00:44.040 So here under the scope of Google Map, if you go up this is the scope of Google Map. 00:44.440 --> 00:45.600 Scroll down. 00:45.640 --> 00:52.680 Let's create that geocoding overlay which is a search bar starting with column. 00:52.840 --> 01:01.640 Set the modifier equals to modifier align alignment dot bottom start. 01:01.680 --> 01:04.440 Then inside the scope of this column. 01:04.440 --> 01:15.520 Create a text field value equals to search query on value change which is search query equals to it. 01:15.560 --> 01:23.200 Placeholder text enter address the modifier fill maximum width. 01:23.240 --> 01:26.400 Then create a search button on. 01:26.400 --> 01:29.440 Click create a coroutine scope. 01:29.680 --> 01:38.560 Use it to coroutine scope dot launch and inside the launch and the coroutine scope, we need to fetch 01:38.600 --> 01:40.960 the geocoding and the location. 01:40.960 --> 01:45.120 So location variable equals to geocode address. 01:45.120 --> 01:48.000 This is the function that we created before. 01:48.120 --> 01:51.880 And we need to pass the context the search query. 01:52.080 --> 01:56.760 And the last parameter is the lambda expression. 01:56.760 --> 02:06.480 The lambda expression that we created before takes a lat long as a parameter and returns nothing. 02:06.720 --> 02:13.880 So here I need to define lat long my or location lat long. 02:14.000 --> 02:15.560 Check for the location. 02:15.560 --> 02:21.920 If it is not null, then let location location lat long. 02:21.960 --> 02:25.000 If it is not null, then what we need to do? 02:25.280 --> 02:33.120 We need to move the camera position state to the newly created one using the camera position function 02:33.120 --> 02:37.400 dot from lat long, zoom it and 15. 02:37.920 --> 02:44.440 Then set the modifier fill maximum width and inside the row scope. 02:44.600 --> 02:47.040 Set the text search. 02:47.080 --> 02:55.000 There is a very important note here, since we are using the coroutine scope to do the job of searching, 02:55.000 --> 02:58.240 query and search the address and get it back. 02:58.440 --> 03:03.680 We need to wrap it inside dispatchers. 03:03.680 --> 03:12.440 So here if you hover the mouse you get type mismatch required lambda expression found a job and to solve 03:12.440 --> 03:12.600 it. 03:12.640 --> 03:13.880 It's very simple. 03:14.080 --> 03:21.320 Here on click are returning a job instead of a lambda expression. 03:21.320 --> 03:24.320 It's very simple using like this. 03:24.360 --> 03:32.040 And here wrapping it inside this okay so this is the lambda expression that we create here. 03:32.160 --> 03:38.240 The second step is to remove the location because here we don't expect returning anything okay. 03:38.400 --> 03:46.720 It's very simple here we created a coroutine and we used this function to make the geocoding. 03:46.920 --> 03:48.720 Then scroll down. 03:48.760 --> 03:56.240 We set this text to the search and let me display the address in a text. 03:56.240 --> 04:00.880 So display create a new composable okay let me run. 04:00.880 --> 04:02.120 Now here we go. 04:02.320 --> 04:12.720 This is our search bar I need to move this text because it's under and behind this surface. 04:12.840 --> 04:14.120 Let me move it. 04:14.160 --> 04:14.840 Cut. 04:14.840 --> 04:26.520 Scroll up and here above the text field, make this text and let me add some margin and padding padding 04:26.640 --> 04:27.680 from bottom. 04:27.680 --> 04:31.400 Set it to for example, 60 dpi. 04:31.520 --> 04:33.040 Run the application again. 04:33.320 --> 04:34.600 Take the effect. 04:34.600 --> 04:37.200 It's better now that text is visible. 04:37.240 --> 04:40.560 Now let's enter the address here. 04:40.720 --> 04:41.240 Um. 04:44.040 --> 04:47.240 Let me start with Eiffel Tower. 04:47.280 --> 04:50.040 Click search and here we go. 04:50.360 --> 04:59.120 We are in Paris, so that map directs us to the current location of Eiffel Tower. 04:59.400 --> 05:01.560 Let me try another thing. 05:01.800 --> 05:03.320 Statue of Liberty. 05:03.440 --> 05:04.560 Click search. 05:04.720 --> 05:05.880 And here we go. 05:06.160 --> 05:12.160 This is the Statue of Liberty that we have in New York and New Jersey. 05:12.200 --> 05:12.720 Okay. 05:13.080 --> 05:16.720 So this is how we use geocoding.