Mastering Google Map in Jetpack Compose style by Abhishek Pathak

Today, we’re going to discuss how to seamlessly integrate maps into your Jetpack Compose app using the Maps Compose Library.

some scenario’s captured of the upcoming part of this article

According to the official documentation of the Maps Compose Library, it provides composable functions and data types to tackle various common tasks.

To kick things off, you’ll need to snag an API key by following the instructions on this page:

Using API Keys | Maps SDK for Android | Google Developers

Using API Keys | Maps SDK for Android | Google for Developers

Afterwards, add all the necessary dependencies into your project:

implementation("com.google.maps.android:maps-compose:2.11.4")
implementation ("com.google.android.gms:play-services-maps:18.2.0")

In your manifest file, slide in the following metadata:

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

Now, you’re all set to weave maps into your code.

Let’s Play with Maps into the App

A simple call to GoogleMap() will embeds a map in your app. GoogleMap is like a Compose container for MapView, enabling the display of maps in your app. You can pass in various optional parameters to this composable.

@Composable
fun GoogleMap(
    mergeDescendants: Boolean = false,
    modifier: Modifier = Modifier,
    cameraPositionState: CameraPositionState = rememberCameraPositionState(),
    contentDescription: String? = null,
    googleMapOptionsFactory: () -> GoogleMapOptions = { GoogleMapOptions() },
    properties: MapProperties = DefaultMapProperties,
    locationSource: LocationSource? = null,
    uiSettings: MapUiSettings = DefaultMapUiSettings,
    indoorStateChangeListener: IndoorStateChangeListener = DefaultIndoorStateChangeListener,
    onMapClick: (LatLng) -> Unit? = null,
    onMapLongClick: (LatLng) -> Unit? = null,
    onMapLoaded: () -> Unit? = null,
    onMyLocationButtonClick: () -> Boolean? = null,
    onMyLocationClick: (Location) -> Unit? = null,
    onPOIClick: (PointOfInterest) -> Unit? = null,
    contentPadding: PaddingValues = NoPadding,
    content: @Composable () -> Unit? = null
)

Some of these parameters include:

• cameraPositionState: CameraPositionState — used to tweak or observe the map's camera state.
• properties: MapProperties — map properties such as isBuildingEnabled, isIndoorEnabled, isMyLocationEnabled, etc. Enabling isMyLocationEnabled necessitates asking for permissions for fine and coarse locations.
• googleMapOptionsFactory: () -> GoogleMapOptions — a block to create GoogleMapOptions during map creation.
• Various actions like onMapClicked, onMapLoaded, onMyLocationButtonClick.
• uiSettings: MapUiSettings — UI-specific settings on the map, like compassEnabled, scrollGesturesEnabled, rotationGesturesEnabled, etc.

Next, you can set the camera state to zoom in on a particular location:

val cameraPositionState = rememberCameraPositionState(
    position = CameraPosition.fromLatLngZoom(LatLng(20.45643, 30.0978), 15f)
)

Markers

If you want to mark places, like gas stations or hotels, the library offers the Marker composable. It comes with parameters such as state, draggable, flat, icon, and various actions like onClick, onInfoWindowClick, onInfoWindowClose, and onInfoWindowLongClick.

@Composable
fun Marker(
    contentDescription: String? = "",
    state: MarkerState = rememberMarkerState(),
    alpha: Float = 1.0f,
    anchor: Offset = Offset(0.5f, 1.0f),
    draggable: Boolean = false,
    flat: Boolean = false,
    icon: BitmapDescriptor? = null,
    infoWindowAnchor: Offset = Offset(0.5f, 0.0f),
    rotation: Float = 0.0f,
    snippet: String? = null,
    tag: Any? = null,
    title: String? = null,
    visible: Boolean = true,
    zIndex: Float = 0.0f,
    onClick: (Marker) -> Boolean = { false },
    onInfoWindowClick: (Marker) -> Unit = {},
    onInfoWindowClose: (Marker) -> Unit = {},
    onInfoWindowLongClick: (Marker) -> Unit = {}
)

Polyline

To draw a line between points, you can use the Polyline composable. It requires a list of latitudes and longitudes, with additional parameters like clickable, color, startCap, endCap, width, and onClick.

The final code incorporates a Polyline connecting the markers.

There are numerous options and composable elements available for use with maps, which can be explored further in the official documentation.

That wraps up our discussion on the MapsApp. I hope you found this article enlightening and enjoyable.

@Composable
fun Polyline(
    points: List<LatLng>,
    clickable: Boolean = false,
    color: Color = Color.Black,
    endCap: Cap = ButtCap(),
    geodesic: Boolean = false,
    jointType: Int = JointType.DEFAULT,
    pattern: List<PatternItem>? = null,
    startCap: Cap = ButtCap(),
    tag: Any? = null,
    visible: Boolean = true,
    width: Float = 10.0f,
    zIndex: Float = 0.0f,
    onClick: (Polyline) -> Unit = {}
)

Circles

Now, let’s explore adding circles to the map. The Circle composable allows you to display circles on the map. Parameters include state, center, radius, clickable, fillColor, strokeColor, strokeWidth, and onClick.

@Composable
fun Circle(
    center: LatLng,
    clickable: Boolean = false,
    fillColor: Color = Color.Transparent,
    radius: Double = 0.0,
    strokeColor: Color = Color.Black,
    strokePattern: List<PatternItem>? = null,
    strokeWidth: Float = 10.0f,
    tag: Any? = null,
    visible: Boolean = true,
    zIndex: Float = 0.0f,
    onClick: (Circle) -> Unit = {}
)

Polygons

Now, let’s discuss adding polygons to the map. The Polygon composable allows you to create polygons with parameters like state, points, clickable, fillColor, strokeColor, strokeWidth, and onClick.

@Composable
fun Polygon(
    points: List<LatLng>,
    clickable: Boolean = false,
    fillColor: Color = Color.Black,
    geodesic: Boolean = false,
    holes: List<List<LatLng>> = emptyList(),
    strokeColor: Color = Color.Black,
    strokeJointType: Int = JointType.DEFAULT,
    strokePattern: List<PatternItem>? = null,
    strokeWidth: Float = 10.0f,
    tag: Any? = null,
    visible: Boolean = true,
    zIndex: Float = 0.0f,
    onClick: (Polygon) -> Unit = {}
)

Result is below, please scroll up…

If you’re hungry for more code, feel free to explore additional examples and snippets in my GitHub repository. You’ll find a wealth of resources and inspiration to enhance your mapping endeavors.

There are numerous options and composable elements available for use with maps, which can be explored further in the official documentation.

Jetpack-Compose-All-In-One-Guide/app/src/main/java/com/example/jetpack_compose_all_in_one/lessons/le…

This lesson shows various examples of maps
• Chapter 1: Map Basics
- Simple Map
- Inflate Marker on Map
• Chapter 2: Map types
• Chapter 3: Current Location on map
• Chapter 4: Search on map

References:

• https://googlemaps.github.io/android-maps-compose/index.html
• https://developers.google.com/maps/documentation/android-sdk/maps-compose

Thank you for reading my article. I really appreciate your response.

Clap if this article helps you. If I got something wrong, please comment for improve.
let’s connect on Linkedin , GitHub