Android Jetpack Compose: How to Use Google Maps
Last Updated :
17 Mar, 2025
Many applications such as Swiggy, Zomato, Ola, and others use Google Maps within their application to display the location within their application. Most of these applications use Google Maps to display the details within their application. In this article, we will take a look at How to integrate Google Maps in Android using Jetpack Compose.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.
Step 2: Adding dependency to use Google Maps
Navigate to build.gradle file and add the below dependency in the build.gradle file.
dependencies {
...
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.8.6")
implementation("com.google.android.gms:play-services-maps:19.1.0")
}
After adding the dependency simply click on the sync now option to install it.
Step 3: Adding permissions and google maps API key
Navigate to app > AndroidManifest.xml file and add the below code in the application tag for adding the API key.
<application
...
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Enter your API key" />
</application>
Check out the below article on How to generate API key for Google Maps in Android.
Step 4: Create a new layout file for the map layout
Navigate to app > res, Right click on it, New > Directory and name it as layout. Now right-click on that directory and click on New > Layout resource file. Create a new XML file and name it map_layout and add the below code to it. Comments are added in the code to get to know it in detail.
map_layout.xml:
XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.fragment.app.FragmentContainerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Step 5: Create a new file for creating a Map
Navigate to app > kotlin+java > {package-name} Right click on it, New > Kotlin Class/File and name it as MapUtils and add the below code to it. Comments are added in the code to get to know it in detail.
MapUtils.kt:
Kotlin
package com.geeksforgeeks.demo
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()
}
}
}
Step 6: Working with MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
MainActivity.kt:
Kotlin
package com.geeksforgeeks.demo
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.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.viewinterop.AndroidView
import com.geeksforgeeks.demo.ui.theme.DemoTheme
import com.google.maps.android.ktx.awaitMap
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
DemoTheme {
MapScreen()
}
}
}
}
@Composable
fun MapScreen() {
val mapView = rememberMapViewWithLifecycle()
Column(
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
.background(Color.White)
) {
// Map View
AndroidView({ mapView }) { mapView ->
// launch map view
CoroutineScope(Dispatchers.Main).launch {
val map = mapView.awaitMap()
// adding zoom controls
map.uiSettings.isZoomControlsEnabled = true
}
}
}
}
Output:

Similar Reads
Android Jetpack Compose: How to Add SearchView to Google Maps
We have seen the implementation of Google Maps in Android along with markers on it. But many apps provide features so that users can specify the location on which they have to place markers. So in this article, we will implement a SearchView in our Android app so that we can search a location name a
8 min read
How to Draw Track on Google Maps in Android using Jetpack Compose?
In many android apps, we have seen that there is a route marker from a source location to the destination location. In this article, we will take a look at How we can draw a track on Google Maps in Android using Jetpack Compose. Step By Step ImplementationStep 1: Create a New Project in Android Stu
6 min read
Android Jetpack Compose: How to Display Marker on Google Maps
We have seen Google Maps in many android applications. In this application to point to the specific location, a marker is used. In this article, we will take a look at How to display a marker on Google Maps in Android using Jetpack Compose. A sample video is given below to get an idea about what we
6 min read
How to Draw Polylines on Google Maps in Android using Jetpack Compose?
Google Maps is used in many Android applications. While using Google Maps there are many modifications that you will get to see while using Maps in this app. When we have used Google Maps in different apps such as OLA and Uber, we will see lines and routes drawn on our Maps. In this article, we will
6 min read
How to Use Different Types of Google Maps in Android using Jetpack Compose?
When we use the default application of Google Maps we will get to see different types of Maps present inside this application. We will get to see satellite maps, terrain maps, and many more. We have seen adding Google Maps in the Android application. In this article, we will take a look at the imple
7 min read
How to Add Custom Marker to Google Maps in Android using Jetpack Compose?
Many android applications use maps to display the location. We can get to see they use custom marker icons like a delivery boy image or an icon to display a marker on the map. In this article, we will take a look at How to use a custom icon as a marker on google maps in our android application. Ste
6 min read
Android Jetpack Compose - How to Use Phone Selector API
In most android applications, we get to see that users don't have to enter their phone numbers for authentication. A pop-up message is triggered automatically which displays the phone number of the user which is present on the device. This feature helps users to easily authenticate within the applic
5 min read
How to Add Multiple Markers to Google Maps in Android using Jetpack Compose?
Google Maps is used in most apps which are used to represent many locations and markers on Google Maps. We have seen markers on Google maps for multiple locations. In this article, we will take a look at the implementation of Multiple Markers on Google Maps in Android using Jetpack Compose. Step By
6 min read
Android Jetpack Compose - Integrate Google reCAPTCHA
Google reCAPTCHA is a service provided by Google which is used to verify the user whether is a user or a robot by providing them with a simple captcha to solve. In this article, we will be taking a look at How to integrate Google reCAPTCHA in the android application using Jetpack Compose. Steps to I
5 min read
Toast in Android Jetpack Compose
In Android, a Toast is a message or a pop-up message that generally appears at the bottom of the screen for a short span. A Toast is used to deliver simple feedback about any function or operation the application is running on the device. In simpler words, it displays the status of any running or fi
3 min read