googlemaps / googlemaps/android-maps-compose
[GoogleMap]: Markers aren't cleared out when provided backing field changes
- Dominant language
- Kotlin
- Stars
- 1.3k
- Forks
- 181
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 18
Description
#### Environment details
Kotlin 1.9.10
AGP 8.3.0-alpha11
Maps Compose 4.1.1
Compose Plugin 1.5.10
#### Steps to reproduce
1. Add a GoogleMap() composable and render `MarkerComposables` from a List provided by a ViewModel State or other data source
2. Change the List contents
3. Observe the contents within the markers change but not the positions
#### Code example
```
@Composable
actual fun MapView(
modifier: Modifier,
contentPadding: PaddingValues,
userLocation: LatLong?,
resultLocations: List,
useTotalPrice: Boolean,
onMarkerSelectionChange: (String?) -> Unit,
onMapMoved: () -> Unit,
) {
[...]
BoxWithConstraints(modifier = modifier) {
GoogleMap(
modifier = Modifier.matchParentSize(),
contentPadding = contentPadding,
contentDescription = "Map view for properties with applied filters and search parameters",
cameraPositionState = cameraPositionState,
properties = properties,
uiSettings = uiSettings,
onMapClick = { currentSelectedMarkerId = null }
) {
resultLocations.forEach { listing ->
val location = LatLng(listing.location.latitude, listing.location.longitude)
val markerState = rememberMarkerState(
position = location
)
MarkerComposable(
keys = arrayOf(
listing.id,
location,
useTotalPrice,
currentSelectedMarkerId ?: "",
previousSelectedMarkers
),
state = markerState,
tag = listing.id,
onClick = {
currentSelectedMarkerId = it.tag as? String
true
}
) {
PricePill(
price = "${listing.totalPriceOfStay()}".formatAsMoney(),
isSelected = currentSelectedMarkerId == listing.id,
wasPreviouslySelected = previousSelectedMarkers.contains(listing.id)
)
}
}
[...]
}
}
}
```
However by creating my own `MutableState` for the List, initialized as `emptyList()` I'm able to have the map clear and redraw the new markers.
```
var markersToDraw by remember(resultLocations) {
mutableStateOf(emptyList())
}
GoogleMap(
modifier = Modifier.matchParentSize(),
contentPadding = contentPadding,
contentDescription = "Map view for properties with applied filters and search parameters",
cameraPositionState = cameraPositionState,
properties = properties,
uiSettings = uiSettings,
onMapClick = { currentSelectedMarkerId = null }
) {
markersToDraw.forEach { listing ->
val location = LatLng(listing.location.latitude, listing.location.longitude)
val markerState = rememberMarkerState(
position = location
)
MarkerComposable(
keys = arrayOf(
listing.id,
location,
useTotalPrice,
currentSelectedMarkerId ?: "",
previousSelectedMarkers
),
state = markerState,
tag = listing.id,
onClick = {
currentSelectedMarkerId = it.tag as? String
true
}
) {
PricePill(
price = "${listing.totalPriceOfStay()}".formatAsMoney(),
isSelected = currentSelectedMarkerId == listing.id,
wasPreviouslySelected = previousSelectedMarkers.contains(listing.id)
)
}
}
[...]
LaunchedEffect(resultLocations) {
markersToDraw = resultLocations
}
}
```
#### Stack trace
N/A
Following these steps will guarantee the quickest resolution possible.
Thanks!
Contributor guide
Assessment
This issue has not been assessed yet.