docs: improved recomposition sample (#475)

* docs: changed recomposition sample Co-authored-by: Uli Bubenheimer <[email protected]> * docs: updated Recomposition Activity Co-authored-by: Uli Bubenheimer <[email protected]> --------- Co-authored-by: Uli Bubenheimer <[email protected]>
googlemaps · Jan 22, 2024 · ae6b8b8 · ae6b8b8
1 parent 4b7967d
commit ae6b8b8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -205,23 +205,24 @@ GoogleMap(
 
 ### Recomposing elements
 
-Markers and other elements need to be recomposed in the screen. To achieve recomposition you need to 
-have a mutable state variable:
+Markers and other elements need to be recomposed in the screen. To achieve recomposition, you can set mutable properties of state objects:
 
 ```kotlin
-var location by remember { mutableStateOf(singapore) }
-val singaporeState = MarkerState(position = location)
+val markerState = rememberMarkerState(position = singapore)
 
 //...
 
-Marker(
-    state = singaporeState,
-    title = "Marker in Singapore",
-    onClick = markerClick
-)
+LaunchedEffect(Unit) {
+    repeat(10) {
+        delay(5.seconds)
+        val old = markerState.position
+        markerState.position = LatLng(old.latitude + 1.0, old.longitude + 2.0)
+    }
+}
 ```
 
-In the example above, when `location` changes the recomposition will be triggered. 
+In the example above, recomposition occurs as `MarkerState.position` is updated with different values over time, shifting the Marker around the screen.
+
 
 </details>
 <details>

diff --git a/app/src/main/java/com/google/maps/android/compose/RecompositionActivity.kt b/app/src/main/java/com/google/maps/android/compose/RecompositionActivity.kt
@@ -27,7 +27,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import com.google.android.gms.maps.model.Marker
 import com.google.maps.android.compose.theme.MapsComposeSampleTheme
@@ -65,8 +64,7 @@ class RecompositionActivity : ComponentActivity() {
         cameraPositionState: CameraPositionState = rememberCameraPositionState(),
         content: @Composable () -> Unit = {},
     ) {
-        var location by remember { mutableStateOf(singapore) }
-        val singaporeState = MarkerState(position = location)
+        val markerState = rememberMarkerState(position = singapore)
 
         val uiSettings by remember { mutableStateOf(MapUiSettings(compassEnabled = false)) }
         val mapProperties by remember {
@@ -93,7 +91,7 @@ class RecompositionActivity : ComponentActivity() {
                 }
 
                 Marker(
-                    state = singaporeState,
+                    state = markerState,
                     title = "Marker in Singapore",
                     onClick = markerClick
                 )
@@ -103,7 +101,7 @@ class RecompositionActivity : ComponentActivity() {
             Column {
                 Button(onClick = {
                     val randomValue = Random.nextInt(3)
-                    location = when (randomValue) {
+                    markerState.position = when (randomValue) {
                         0 -> singapore
                         1 -> singapore2
                         2 -> singapore3