Android Jetpack Compose: How to Add SearchView to Google Maps

package com.example.newcanaryproject.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFF0F9D58)
val Purple500 = Color(0xFF0F9D58)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

// on below line we are adding different colors.
val greenColor = Color(0xFF0F9D58)

package com.example.newcanaryproject

import android.os.Bundle
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
import com.google.android.libraries.maps.MapView

// on below line creating a new 
// composable widget for displaying map
@Composable
fun rememberMapViewWithLifecycle(): MapView {
    val context = LocalContext.current
    // on below line initializing our maps view with id.
    val mapView = remember {
        MapView(context).apply {
            id = R.id.map
        }
    }

    // Makes MapView follow the lifecycle of this composable
    val lifecycleObserver = rememberMapLifecycleObserver(mapView)
   
    // on below line initializing lifecycle variable.
    val lifecycle = LocalLifecycleOwner.current.lifecycle
    
    // on below line adding observer for lifecycle.
    DisposableEffect(lifecycle) {
        lifecycle.addObserver(lifecycleObserver)
        onDispose {
            lifecycle.removeObserver(lifecycleObserver)
        }
    }
    // returning map view on below line.
    return mapView
}

@Composable
// creating a function for map lifecycle observer.
fun rememberMapLifecycleObserver(mapView: MapView): LifecycleEventObserver =
    remember(mapView) {
        // on below line adding different events for maps view
        LifecycleEventObserver { _, event ->
            when (event) {
                Lifecycle.Event.ON_CREATE -> mapView.onCreate(Bundle())
                Lifecycle.Event.ON_START -> mapView.onStart()
                Lifecycle.Event.ON_RESUME -> mapView.onResume()
                Lifecycle.Event.ON_PAUSE -> mapView.onPause()
                Lifecycle.Event.ON_STOP -> mapView.onStop()
                Lifecycle.Event.ON_DESTROY -> mapView.onDestroy()
                else -> throw IllegalStateException()
            }
        }
    }

package com.example.newcanaryproject

import android.content.Context
import android.location.Address
import android.location.Geocoder
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.viewinterop.AndroidView
import com.example.newcanaryproject.ui.theme.NewCanaryProjectTheme
import com.example.newcanaryproject.ui.theme.greenColor
import com.google.android.libraries.maps.CameraUpdateFactory
import com.google.android.libraries.maps.MapView
import com.google.android.libraries.maps.model.LatLng
import com.google.android.libraries.maps.model.MarkerOptions
import com.google.maps.android.ktx.awaitMap
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
import java.io.IOException

class MainActivity : ComponentActivity() {

    var message = ""
    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContent {
            NewCanaryProjectTheme {
                // on below line we are specifying background color for our application
                Surface(
                    // on below line we are specifying modifier and color for our app
                    modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background
                ) {

                    // on the below line we are specifying
                    // the theme as the scaffold.
                    Scaffold(

                        // in scaffold we are specifying the top bar.
                        topBar = {

                            // inside top bar we are specifying background color.
                            TopAppBar(backgroundColor = greenColor,

                                // along with that we are specifying
                                // title for our top bar.
                                title = {

                                    // in the top bar we are 
                                    // specifying tile as a text
                                    Text(
                                        // on below line we are specifying
                                        // text to display in top app bar.
                                        text = "GFG",

                                        // on below line we are specifying
                                        // modifier to fill max width.
                                        modifier = Modifier.fillMaxWidth(),

                                        // on below line we are specifying
                                        // text alignment.
                                        textAlign = TextAlign.Center,

                                        // on below line we are specifying
                                        // color for our text.
                                        color = Color.White
                                    )
                                })
                        }) {
                        mapUI(LocalContext.current)
                        // on below line we are calling
                        // method to display UI
                    }
                }
            }
        }
    }
}

@Composable
fun mapUI(context: Context) {
    val mapView = rememberMapViewWithLifecycle()
    // on below line creating a variable for location.
    val locationName = remember {
        mutableStateOf("")
    }
    // on below line creating a column for our maps.
    Column(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
            .background(Color.White)
    ) {

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(all = 3.dp),
            horizontalArrangement = Arrangement.Center
        ) {
            // on below line we are creating a
            // text field for our message number.
            TextField(
                // on below line we are specifying value 
                // for our message text field.
                value = locationName.value,
                // on below line we are adding on 
                // value change for text field.
                onValueChange = { locationName.value = it },
                // on below line we are adding place holder 
                // as text as "Enter your email"
                placeholder = { Text(text = "Enter your location to search") },
                // on below line we are adding modifier to it
                // and adding padding to it and filling max width
                modifier = Modifier
                    .padding(3.dp)
                    .width(300.dp)
                    .height(60.dp),
                // on below line we are adding text style
                // specifying color and font size to it.
                textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
                // on below line we are adding single line to it.
                singleLine = true,
            )
            Spacer(modifier = Modifier.width(5.dp))

            // on below line adding a button.
            Button(
                onClick = {
                    getMapLocation(locationName.value, context, mapView)

                },
                // on below line adding a modifier for our button.
                modifier = Modifier.padding(3.dp)
            ) {
                Image(
                    // on below line we are specifying the drawable
                    // image for our image.
                    painter = painterResource(id = R.drawable.ic_search),
                    alignment = Alignment.Center,
                    // on below line we are specifying
                    // content description for our image
                    contentDescription = "Image",

                    // on below line we are setting height
                    // and width for our image.
                    modifier = Modifier
                        .height(40.dp)
                        .width(40.dp)

                )
            }
        }
        // on below line adding a map view to it.
        AndroidView({ mapView }) { mapView ->
            // on below line launching our map view
            CoroutineScope(Dispatchers.Main).launch {
                val map = mapView.awaitMap()
                // on below line adding zoom controls for map.
                map.uiSettings.isZoomControlsEnabled = true
            }
        }
    }
}

private fun getMapLocation(location: String, context: Context, mapView: MapView) {
    // below line is to create a list of address
    // where we will store the list of all address.

    var addressList: List<Address>? = null
    // on below line we are getting our map view.
    mapView.getMapAsync {
        if (location != null || location == "") {
            // on below line we are creating 
            // and initializing a geo coder.
            val geocoder = Geocoder(context)
            try {
                // on below line we are getting location from the
                // location name and adding that location to address list.
                addressList = geocoder.getFromLocationName(location, 1)
            } catch (e: IOException) {
                e.printStackTrace()
            }
            // on below line we are getting the location
            // from our list a first position.
            val address: Address = addressList!![0]

            // on below line we are creating a variable for our location
            // where we will add our locations latitude and longitude.
            val latLng = LatLng(address.getLatitude(), address.getLongitude())

            it.addMarker(
                MarkerOptions().position(
                    latLng
                ).title("Marker in " + location)
            )
            // below line is use to move camera.
            it.moveCamera(
                CameraUpdateFactory.newLatLng(
                    latLng
                )
            )
            // on below line we are moving our
            // camera at the focused location
            it.moveCamera(
                CameraUpdateFactory.newLatLngZoom(
                    latLng, 8f
                )
            )
        }

    }
}