googlemaps / googlemaps/android-maps-compose
When two markers are close to each other, clicking on the exact same spot won’t always trigger the same marker, and it gets worse if z-indexes are involved
- Dominant language
- Kotlin
- Stars
- 1.3k
- Forks
- 181
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 18
Description
I’ve reproduced the issue on a Pixel 4a and Zenfone 10 both running Android 13.
- Run the sample and tap on the “Marker Clustering” button. Lots of markers there, so it’s a good place to reproduce the issue.
- Reach a zoom level where you get two markers close to each other, something like this:

- Keep tapping on an isolated point in one of the markers, where there shouldn’t be any doubts about which marker is being tapped, and then observe that clicking on the same point will sometimes trigger one marker, and sometimes the other:
https://github.com/googlemaps/android-maps-compose/assets/750114/f1456ded-dc01-4efb-ad0b-cb952ce30e5f
- This is weird but it’s not so bad. I guess this may actually be an accessibility feature so it’s easy to switch back and forth between nearby markers? It gets more interesting if the markers have z-indexes set, so let’s observe this again with custom markers this time. You can run the code below within the sample:
```kotlin
val markers = listOf(LatLng(51.721695, 10.393405), LatLng(51.824536, 10.537953))
var highlightedMarkerIndex by remember { mutableIntStateOf(0) }
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(markers[highlightedMarkerIndex], 7.5f)
}
Box(Modifier.fillMaxSize()) {
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState,
) {
markers.forEachIndexed { index, marker ->
MarkerComposable(
highlightedMarkerIndex,
state = rememberMarkerState(position = marker),
anchor = Offset(0.5f, 0.5f),
onClick = {
highlightedMarkerIndex = index
true
}
) {
Box(
modifier = Modifier
.size(32.dp)
.background(if (index == highlightedMarkerIndex) Color.Red else Color.Gray),
)
}
}
}
}
```
- And observe the same thing there. It’s just a map with two square markers and whenever a marker is tapped, it becomes red:
https://github.com/googlemaps/android-maps-compose/assets/750114/59b41ca2-4d52-4e22-85ed-b0cadebc7f41
- Now let’s make the highlighted marker always be on top by passing `zIndex = if (index == highlightedMarkerIndex) 1f else 0f`, and here’s where the experience really starts feeling broken: now in order to highlight the non-highlighted marker, you have to tap twice.
https://github.com/googlemaps/android-maps-compose/assets/750114/8a8be3c5-90ff-4910-a21f-842768579f8d
I went through multiple examples to try to explain all the weirdnesses I've identified while investigating this, but this last part is the real issue to me. We're highlighting markers and making sure the highlighted marker has a higher z-index, but this is causing the first tap to a nearby marker to be ignored as it's demonstrated above.
Contributor guide
Assessment
This issue has not been assessed yet.