How to Use Different Types of Google Maps in Android using Jetpack Compose?

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)

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()
            }
        }
    }

import android.content.Context
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
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.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
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.GoogleMap
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

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 column for our maps.
    Column(
        modifier = Modifier.fillMaxHeight().fillMaxWidth().background(Color.White)
    ) {
        // on below line we are creating a row.
        Row(
            modifier = Modifier.fillMaxWidth().padding(all = 5.dp),
            horizontalArrangement = Arrangement.Center
        ) {
            // on below line adding a button.
            Button(
                onClick = {
                    // below line is to change the type of satellite map.
                    getMapLocation(mapView, "Hybrid")
                },
                // on below line adding a modifier for our button.
                modifier = Modifier
                    .padding(5.dp)
                    .width(120.dp)
            ) {
                // on below line adding a text for our button.
                Text(text = "Hybrid", textAlign = TextAlign.Center)
            }

            // on below line adding a button.
            Button(
                onClick = {
                    // below line is to change the type of satellite map.
                    getMapLocation(mapView, "Terrain")
                },
                // on below line adding a modifier for our button.
                modifier = Modifier.padding(5.dp).width(120.dp)
            ) {
                // on below line adding a text for our button.
                Text(text = "Terrain", textAlign = TextAlign.Center)
            }
            
            // on below line adding a button.
            Button(
                onClick = {
                    // below line is to change the type of satellite map.
                    getMapLocation(mapView, "Satellite")
                },
                // on below line adding a modifier for our button.
                modifier = Modifier.padding(5.dp).width(120.dp)
            ) {
                // on below line adding a text for our button.
                Text(text = "Satellite", textAlign = TextAlign.Center)
            }
        }

        // 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
            }
            getMapLocation(mapView, "")
        }
    }
}

private fun getMapLocation(mapView: MapView, mapType: String) {
    // below line is to create a list of address
    // where we will store the list of all address.
    // on below line we are getting our map view.
    mapView.getMapAsync {
        if (mapType.equals("Hybrid")) {
            it.mapType = GoogleMap.MAP_TYPE_HYBRID
        } else if (mapType.equals("Terrain")) {
            it.mapType = GoogleMap.MAP_TYPE_TERRAIN
        } else if (mapType.equals("Satellite")) {
            it.mapType = GoogleMap.MAP_TYPE_SATELLITE
        }
        // on below line creating a lat lng for delhi location
        val delhi = LatLng(28.644800, 77.216721)
        // below line is use to add marker to each location of our array list.
        it.addMarker(MarkerOptions().position(delhi).title("Marker at Delhi"))
        // below line is use to zoom our camera on map.
        it.animateCamera(CameraUpdateFactory.zoomTo(20.0f))
        // below line is use to move our camera to the specific location.
        it.moveCamera(CameraUpdateFactory.newLatLng(delhi))
    }
}