Exploring the World with Google Maps in Jetpack Compose

In today’s digital age, maps are an integral part of our daily lives. Whether you’re navigating through a new city, finding nearby restaurants, or just exploring the world from the comfort of your home, maps play a crucial role in providing us with valuable information. Google Maps is one of the most popular mapping services, and in this article, we’ll explore how you can integrate Google Maps into your Android app using Jetpack Compose.

Why Use Jetpack Compose?

Jetpack Compose is a modern Android UI toolkit that simplifies UI development and makes it more interactive and flexible. It’s a declarative UI framework that allows you to define your app’s UI using a composable function-based approach, making it easier to build complex UIs and maintain them. Integrating Google Maps with Jetpack Compose can enhance your app’s user experience by seamlessly blending the power of Google Maps with the flexibility of Jetpack Compose.

Getting Started

Before we dive into the code, make sure you have the following prerequisites:

• Android Studio (latest version)
• Google Maps API Key (You can obtain it from the Google Cloud Console)

Let’s create a new Android project with Jetpack Compose and add Google Maps functionality step by step.

Step 1: Create a New Android Project

Open Android Studio and create a new Android project with an Empty Compose Activity template. Give your project a name and set the package name accordingly.

Step 2: Add Google Maps API Key

To use Google Maps, you need an API key. Go to the Google Cloud Console (https://console.cloud.google.com/), create a new project, and enable the Google Maps Android API. Then, generate an API key and restrict it to your Android app’s package name and SHA-1 fingerprint.

Once you have the API key, add it to your app’s AndroidManifest.xml file within the <application> tag like this:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY_HERE" />

Replace "YOUR_API_KEY_HERE" with your actual API key.

Step 3: Add Dependencies

In your app-level build.gradle file, add the following dependencies:

implementation "androidx.compose.ui:ui:1.0.5"
implementation "androidx.compose.ui:ui-tooling:1.0.5"
implementation "androidx.activity:activity-compose:1.3.1"
implementation "com.google.android.gms:play-services-maps:18.0.0"

Sync your project to ensure the new dependencies are downloaded.

Step 4: Create a Composable for Google Maps

Now, let’s create a composable function that displays Google Maps. In your main Composable file (usually named MainActivity.kt), add the following code:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.google.android.gms.maps.GoogleMap
import com.google.android.gms.maps.MapView
import com.google.android.gms.maps.model.LatLng
import com.google.android.gms.maps.model.MarkerOptions
import androidx.compose.ui.viewinterop.AndroidView
import androidx.lifecycle.LifecycleOwner
import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun MapViewComposable(
    modifier: Modifier = Modifier,
    mapView: MapView,
    onMapReady: (GoogleMap) -> Unit
) {
    AndroidView(
        factory = { mapView },
        modifier = modifier,
        update = { mapView ->
            mapView.onCreate(null)
            mapView.getMapAsync { googleMap ->
                onMapReady(googleMap)
            }
        }
    )
}

@Composable
fun MapScreen() {
    val viewModel = viewModel<MapViewModel>()
    val mapView = rememberMapView()

    MapViewComposable(
        modifier = Modifier.fillMaxSize(),
        mapView = mapView
    ) { googleMap ->
        googleMap.addMarker(
            MarkerOptions()
                .position(LatLng(37.7749, -122.4194))
                .title("San Francisco")
        )
    }
}

In this code:

• We define a MapViewComposable function that encapsulates the MapView widget. It takes a Modifier, a MapView, and a callback function onMapReady that gets called when the map is ready.
• Inside MapViewComposable, we use the AndroidView composable to integrate the MapView with Jetpack Compose. We initialize the map, and when it's ready, we invoke the onMapReady callback.
• The MapScreen composable serves as the main screen where we display the map. We use rememberMapView to create an instance of the MapView.

Step 5: Initialize Google Maps

In your MainActivity, initialize Google Maps by adding the following code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp {
                MapScreen()
            }
        }
    }
}

Step 6: Run Your App

Now that you’ve integrated Google Maps into your Jetpack Compose app, you can run it on an Android emulator or device. You should see a map of San Francisco with a marker at the specified coordinates.

Customizing Google Maps

Google Maps provides extensive customization options. You can change the map type, add user location, handle map events, and much more. The GoogleMap object you receive in the onMapReady callback allows you to access these features.

Conclusion

Integrating Google Maps with Jetpack Compose can add a powerful location-based feature to your Android app. By following the steps outlined in this article, you’ve learned how to set up Google Maps, create a Composable for it, and display a simple map with a marker.

As you continue to develop your app, explore the Google Maps documentation to unlock the full potential of location-based services. Jetpack Compose’s flexibility and Google Maps’ rich feature set make for a powerful combination, enabling you to create engaging and interactive map-based experiences for your users. Happy mapping!

LinkedIn — GitHub

Learn More:

1. Mastering the Lifecycle in Android Development using Kotlin
2. ExoPlayer in Kotlin with Coroutines: A Powerful Media Player for Android
3. Clean Architecture in Android: Fostering Resilient and Maintainable Apps

Thanks for Reading!

Please comment with questions and suggestions!! If this blog is helpful for you then hit Please hit the clap! Follow on Medium, Please Follow and subscribe to Make Android for prompt updates on Android platform-related blogs.

Thank you!

Make Android