How do i load GoogleMaps with Jetpack Compose
Published October 31, 2021In 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
Article Contributed By :
|
|
|
|
2402 Views |