feat: support MarkerComposable in clusterItemContent

maps-app/src/main/java/com/google/maps/android/compose/markerexamples/MarkerClusteringActivity.kt

@@ -18,22 +18,22 @@
 
 import android.os.Bundle
 import android.util.Log
-import androidx.compose.ui.text.intl.Locale
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.ScrollState
-import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Icon
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.LocationOn
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
@@ -48,11 +48,12 @@
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -61,17 +62,17 @@
 import com.google.maps.android.clustering.ClusterItem
 import com.google.maps.android.clustering.algo.NonHierarchicalViewBasedAlgorithm
 import com.google.maps.android.clustering.view.DefaultClusterRenderer
+import com.google.maps.android.compose.Circle
 import com.google.maps.android.compose.GoogleMap
 import com.google.maps.android.compose.MapsComposeExperimentalApi
+import com.google.maps.android.compose.MarkerComposable
 import com.google.maps.android.compose.MarkerInfoWindow
 import com.google.maps.android.compose.clustering.Clustering
 import com.google.maps.android.compose.clustering.ClusteringMarkerProperties
 import com.google.maps.android.compose.clustering.rememberClusterManager
 import com.google.maps.android.compose.clustering.rememberClusterRenderer
 import com.google.maps.android.compose.rememberCameraPositionState
 import com.google.maps.android.compose.rememberUpdatedMarkerState
-import com.google.maps.android.compose.Circle
-import com.google.maps.android.compose.singapore
 import com.google.maps.android.compose.singapore2
 import kotlin.random.Random
 
@@ -100,7 +101,8 @@
         }
     }
     Box(
-        modifier = Modifier.fillMaxSize()
+        modifier = Modifier
+            .fillMaxSize()
             .systemBarsPadding()
     ) {
         GoogleMapClustering(items = items)
@@ -142,6 +144,10 @@
                     items = items,
                 )
             }
+
+            ClusteringType.ComposableMarker -> {
+                ComposableMarkerClustering(items)
+            }
         }
 
         MarkerInfoWindow(
@@ -239,15 +245,6 @@
     val screenHeight = configuration.screenHeightDp.dp
     val screenWidth = configuration.screenWidthDp.dp
     val clusterManager = rememberClusterManager<MyItem>()
-
-    // Here the clusterManager is being customized with a NonHierarchicalViewBasedAlgorithm.
-    // This speeds up by a factor the rendering of items on the screen.
-    clusterManager?.setAlgorithm(
-        NonHierarchicalViewBasedAlgorithm(
-            screenWidth.value.toInt(),
-            screenHeight.value.toInt()
-        )
-    )
     val renderer = rememberClusterRenderer(
         clusterContent = { cluster ->
             CircleContent(
@@ -265,6 +262,24 @@
         },
         clusterManager = clusterManager,
     )
+    var rendererConfigured by remember(clusterManager, renderer) { mutableStateOf(false) }
+
+    LaunchedEffect(clusterManager, renderer, screenWidth, screenHeight) {
+        val currentClusterManager = clusterManager ?: return@LaunchedEffect
+        val currentRenderer = renderer ?: return@LaunchedEffect
+
+        if (currentClusterManager.renderer !== currentRenderer) {
+            currentClusterManager.renderer = currentRenderer
+        }
+        // This algorithm limits clustering work to items visible on the screen.
+        currentClusterManager.setAlgorithm(
+            NonHierarchicalViewBasedAlgorithm(
+                screenWidth.value.toInt(),
+                screenHeight.value.toInt()
+            )
+        )
+        rendererConfigured = true
+    }
 
     SideEffect {
         clusterManager ?: return@SideEffect
@@ -280,19 +295,13 @@
             Log.d(TAG, "Cluster item info window clicked! $it")
         }
     }
-    SideEffect {
-        if (clusterManager?.renderer != renderer) {
-            clusterManager?.renderer = renderer ?: return@SideEffect
-        }
-    }
 
-    if (clusterManager != null) {
+    if (clusterManager != null && rendererConfigured) {
         Clustering(
             items = items,
             clusterManager = clusterManager,
         )
     }
-
 }
 
 @OptIn(MapsComposeExperimentalApi::class)
@@ -312,6 +321,32 @@
     )
 }
 
+@OptIn(MapsComposeExperimentalApi::class)
+@Composable
+private fun ComposableMarkerClustering(items: List<MyItem>) {
+    Clustering(
+        items = items,
+        clusterItemContent = { item ->
+            @Suppress("COMPOSE_APPLIER_CALL_MISMATCH")
+            MarkerComposable(
+                title = item.title,
+                snippet = item.snippet,
+                onClick = { marker ->
+                    Log.d(TAG, "Composable cluster marker clicked! $marker")
+                    false
+                },
+            ) {
+                Icon(
+                    imageVector = Icons.Default.LocationOn,
+                    contentDescription = null,
+                    tint = Color.Yellow,
+                    modifier = Modifier.size(20.dp),
+                )
+            }
+        },
+    )
+}
+
 @Composable
 private fun CircleContent(
     color: Color,
@@ -341,10 +376,8 @@
     onClusteringTypeClick: (ClusteringType) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Row(
-        modifier
-            .fillMaxWidth()
-            .horizontalScroll(state = ScrollState(0)),
+    FlowRow(
+        modifier.fillMaxWidth(),
         horizontalArrangement = Arrangement.Start
     ) {
         ClusteringType.entries.forEach {
@@ -354,6 +387,7 @@
                     ClusteringType.CustomUi -> "Custom UI"
                     ClusteringType.CustomRenderer -> "Custom Renderer"
                     ClusteringType.Decorations -> "Decorations"
+                    ClusteringType.ComposableMarker -> "Composable Markers"
                 },
                 onClick = { onClusteringTypeClick(it) }
             )
@@ -380,6 +414,7 @@
     CustomUi,
     CustomRenderer,
     Decorations,
+    ComposableMarker,
 }
 
 data class MyItem(