No shadows appear when creating custom cluster icons using composables

[y9san9]

Expected result: Shadows draw normally:

Actual result: Shadows do not draw:

Composable used in two cases: https://yaso.su/GuR06AbK

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with :+1: so we can see what is popular when we triage.

@y9san9 Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[ln-12]

I am experiencing the same issue when adding a custom marker which contains of a card with elevation.

The code is:

MarkerComposable(
    state = MarkerState(position = LEIPZIG_LATLNG),
) {
    Card(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 10.dp
        ),
        modifier = Modifier.padding(4.dp)
    ) {
        Text(text = "SOME TEXT", modifier = Modifier.padding(4.dp))
    }
}

Which renders like this in the preview:

But looks like this on the map:

And I noticed that not only outer shadows are missing, but also shadows within my compose view.

[y9san9]

Is there any workaround?

[leontodd]

Same issue here. I also tried drawing the shadow with graphicsLayer instead and it doesn't work, which is strange because other graphicsLayer parameters work but shadowElevation does not.

[yasintanriverdi]

Any update on this?

[DearDhruv]

Yeah, can confirm that the Shadow elevation does not work. Even with the Modifier.shadow() or with Card. Using custom shadow with graphics/canvas does not do justice to the UI.

[dragonfist453]

Any update on this? I have the same issue:

MarkerComposable(
    keys = arrayOf(location),
    state = MarkerState(position = location.location),
    anchor = Offset(0.5f, 0.5f),
    title = "${location.location.latitude}, ${location.location.longitude} - ${location.timestamp}",
    alpha = if (location.isSent) 1f else 0.8f,
    zIndex = 6.0f
) {
    Box(
        modifier = Modifier.shadow(elevation = 6.dp, shape = CircleShape)
    ) {
        Icon(
            modifier = Modifier.size(18.dp),
            imageVector = Icons.Default.Circle,
            contentDescription = null,
            tint = MaterialTheme.colorScheme.primary
        )
    }
}

I tried putting the modifier in the Icon component too but it doesn't work as well

I have a workaround for anybody facing this:

MarkerInfoWindowComposable(
    keys = arrayOf(location),
    state = MarkerState(position = location.location),
    anchor = Offset(0.5f, 0.5f),
    title = "${location.location.latitude}, ${location.location.longitude} - ${location.timestamp}",
    alpha = if (location.isSent) 1f else 0.8f,
    zIndex = 6.0f
) {
    Box {
        Icon(
            modifier = Modifier
                .zIndex(1.0f)
                .size(18.dp),
            imageVector = Icons.Default.Circle,
            contentDescription = null,
            tint = MaterialTheme.colorScheme.primary
        )

        Icon(
            modifier = Modifier
                .clip(CircleShape)
                .zIndex(0.0f)
                .offset(x = 0.dp, y = 4.dp)
                .alpha(0.1f)
                .size(18.dp),
            imageVector = Icons.Default.Circle,
            contentDescription = null,
            tint = DefaultShadowColor
        )
    }
}

It's a hack to make sure I get a shadow effect for my circle, but it works out