Add Marker to Google Maps in Android using Jetpack Compose

In this article we will learn Integrate Google Map 's markers Into the Jetpack Compose App | Maps Compose Library

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:

@Composable
fun ComposeMapDemoMarkers() {
    val singapore = LatLng(1.3554117053046808, 103.86454252780209)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(singapore, 30f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    ) {

        Marker(
            state = rememberMarkerState(position = singapore),
            title = "Marker1",
            snippet = "Marker in Singapore",
            icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ORANGE)
        )

    }
}

Different icon marker Sample

@Composable
fun GoogleMarkers() {
    Marker(
        state = rememberMarkerState(position = LatLng(44.811058, 20.4617586)),
        title = "Marker1",
        icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED)
    )
    Marker(
        state = rememberMarkerState(position = LatLng(44.811058, 20.4627586)),
        title = "Marker2",
        icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ORANGE)
    )
    Marker(
        state = rememberMarkerState(position = LatLng(44.810058, 20.4627586)),
        title = "Marker3",
        icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_YELLOW)
    )
    Marker(
        state = rememberMarkerState(position = LatLng(44.809058, 20.4627586)),
        title = "Marker4",
        icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN)
    )
    Marker(
        state = rememberMarkerState(position = LatLng(44.809058, 20.4617586)),
        title = "Marker5",
        icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_CYAN)
    )
}

..

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..

GET source code on Github:

..