Integrate Google Maps Into the Jetpack Compose App

Jetpack Compose + Maps Compose Library

The Jetpack Compose logo used in this image is the official logo created by Google | base image by author

Today we are gonna talk about how to integrate maps into your Jetpack Compose app. For that, we are gonna use the Maps Compose Library.

“The Maps Compose library contains composable functions and data types that let you perform many common tasks.” According to Maps Compose Library official documentation

First, you need to obtain an API key by following the instructions on this page:

Using API Keys | Maps SDK for Android | Google Developers

Next, let’s include needed dependencies:

implementation 'com.google.maps.android:maps-compose:2.7.2'
implementation 'com.google.android.gms:play-services-maps:18.1.0'

Note: Check if there is a newer version of these dependencies.

Next, in your manifest file, add the following metadata:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

Now we are ready to implement maps in our code!

Integrating Maps to the App

By just calling GoogleMap() we are going to show a map in our app. Simple as that! GoogleMap is a compose container for MapView. It allows us to display maps in our app. We can pass many parameters to this composable, but all of them are optional.

Some of the parameters are as follows:

• cameraPositionState: CameraPositionState — used to control or observe the map’s camera state.
• googleMapOptionsFactory: () -> GoogleMapOptions — the block for creating the GoogleMapOptions provided when the map is created.
• properties: MapProperties — properties of the map like isBuildingEnabled, isIndoorEnabled, isMyLocationEnabled, and so on. If isMyLocationEnabled is set to true, then we need to request permissions for fine and coarse locations. To learn how to request location permissions in Jetpack compose take a look at one of my previous articles.
• uiSettings: MapUiSettings— UI-specific settings on the map like compassEnabled, scrollGesturesEnabled, rotationGesturesEnabled, and so on.
• various lambdas like onMapClicked, onMapLoaded, onMyLocationButtonClick.

Next, we can set the camera state to zoom in on some specific location.

val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(LatLng(44.810058, 20.4617586), 16f)
}

We could also get the last location or the current. For more info about that check this documentation.

Markers

What if we want to mark places, for example, nearest gas stations, hotels, or whatever you need? Library got us covered. We can use Markers for that.

Marker composable has a couple of parameters. We will go through the most commonly used, but feel free to check them all.

• state: MarkerState — used to control or observe the marker state such as its position and info window.
• draggable: Boolean — sets the draggability for the marker.
• flat: Boolean — sets if the marker should be flat against the map.
• icon: BitmapDescriptor — sets the icon for the marker.
• various lambdas like onClick, onInfoWindowClick, onInfoWindowClose and onInfoWindowLongClick.

Now, let’s add some markers with different colors. Here’s the code:

You can also get an icon of the marker from the asset, resource, bitmap, file, and so on. If you click on any of the markers you will see an info window with the title of the marker.

Polyline

The next thing that we could do is to draw a line between points. We can use Polyline for that.

It has only one required parameter and that is the list of latitudes and longitudes. Some other parameters are:

• clickable: Boolean — boolean indicating if the polyline is clickable or not
• color: Color — the color of the polyline
• startCap: Cap — the cap at the start vertex of the polyline
• endCap: Cap — the cap at the end vertex of the polyline
• width: Float — the width of the polyline in screen pixels
• onClick: (Polyline) -> Unit — a lambda invoked when the polyline is clicked

We will just add one Polyline that will connect the markers:

The final code looks like this:

There are many options and composables that we can use around maps, but no need to go through all of them now. Feel free to check them out in the official documentation.

That’s it for our MapsApp, I hope you learned something new in this article and that you like it.

You can find all of the source code in my GitHub repo.

Want to Connect?
GitHub
LinkedIn
Twitter
Portfolio website

If you want to learn more about Jetpack Compose, take a look at these articles:

• Implement Bottom Sheet in Jetpack Compose
• Implement Horizontal and Vertical ViewPager in Jetpack Compose
• Build a Camera Android App in Jetpack Compose Using CameraX

Also, you can learn how to use intercepters to include access tokens in your requests by reading this article:

Android Access Token Logic With Retrofit OkHttp Interceptors

Resources

Maps Compose Library | Maps SDK for Android | Google Developers