How do i load GoogleMaps with Jetpack Compose

Published October 31, 2021

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

Jetpack Compose Google Maps android

 

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

 

Download Source code