In this Jetpack compose tutorial we will cover load Google Maps with Jetpack compose. There is no direct compose to show maps with Jetpack compose, we need to use AndroidView to load Google maps inside compose function.
Let's get started
Step 1: Create Jetpack Compose application in Android studio
Step 2: To work with Google Maps we need GoogleMaps API key, to get this key we need to create an Application in Google Maps Console.
Follow the steps to get API Key from Google Maps
Step 3: Configure Manifest file
Copy the Key from the Console and paste it in Manifest file
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="Put Your MAPS_KEY"/>
|
Add internet permission
<uses-permission android:name="android.permission.INTERNET"/>
|
Step 4: Add required dependencies to build.gradle file
implementation("com.google.android.libraries.maps:maps:3.1.0-beta")
implementation("com.google.maps.android:maps-v3-ktx:2.2.0")
implementation("androidx.fragment:fragment:1.3.2")
|
Step 5: Now Load Map with AndroidView by below code
AndroidView(
{mapView}
) { mapView ->
CoroutineScope(Dispatchers.Main).launch {
mapView.getMapAsync {
it.mapType=1
it.uiSettings.isZoomControlsEnabled = true
}
}
}
|
Step 6: Run application
After run the application you will see the map
Complete code for Android Googlemaps with Jetpack Compose.
package com.rrtutors.compose_maps
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.DisposableEffect
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.platform.LocalLifecycleOwner
import androidx.compose.ui.viewinterop.AndroidView
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
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.android.libraries.maps.model.PolylineOptions
import com.google.maps.android.ktx.awaitMap
import com.rrtutors.compose_maps.ui.theme.ComposeMapsTheme
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeMapsTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
GoogleMaps()
}
}
}
}
}
@Composable
fun GoogleMaps() {
var mapView = rememberMapViewWithLifeCycle()
Box(){
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White)
) {
AndroidView(
{mapView}
) { mapView ->
CoroutineScope(Dispatchers.Main).launch {
mapView.getMapAsync {
it.mapType=1
it.uiSettings.isZoomControlsEnabled = true
}
}
}
}
}
}
@Composable
fun rememberMapViewWithLifeCycle(): MapView {
val context = LocalContext.current
val mapView = remember {
MapView(context).apply {
id = com.google.maps.android.ktx.R.id.map_frame
}
}
val lifeCycleObserver = rememberMapLifecycleObserver(mapView)
val lifeCycle = LocalLifecycleOwner.current.lifecycle
DisposableEffect(lifeCycle) {
lifeCycle.addObserver(lifeCycleObserver)
onDispose {
lifeCycle.removeObserver(lifeCycleObserver)
}
}
return mapView
}
@Composable
fun rememberMapLifecycleObserver(mapView: MapView): LifecycleEventObserver =
remember(mapView) {
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()
}
}
}
|
Conclusion: In this Jetpack compose tutorial we covered how to load GoogleMaps with AndroidView
