feat: implement Marker Styling and Marker Collisions in Compose MarkersActivity and update status

Author: dkhawk

Maps3DSamples/ComposeDemos/app/README.md

@@ -8,12 +8,12 @@ This directory contains the Compose samples for the Android Maps 3D SDK. We use
 | :--- | :--- | :--- | :--- | :--- |
 | **Basic Map** | ✅ Done | [HelloMapActivity.kt](src/main/java/com/example/composedemos/hellomap/HelloMapActivity.kt) | <img src="src/main/assets/screenshots/hello_map_screenshot.png" alt="Screenshot" width="121"/> | Displays a basic 3D map with standard satellite imagery and initial camera placement. |
 | **Polylines** | ✅ Done | [PolylinesActivity.kt](src/main/java/com/example/composedemos/polylines/PolylinesActivity.kt) | <img src="src/main/assets/screenshots/polylines_screenshot.png" alt="Screenshot" width="121"/> | Demonstrates drawing 3D polylines on the map, including custom colors and widths. |
-| **Map Interactions** | 🚧 Skeleton | [MapInteractionsActivity.kt](src/main/java/com/example/composedemos/mapinteractions/MapInteractionsActivity.kt) | | Will demonstrate handling click and drag events on map objects. |
+| **Map Interactions** | ✅ Done | [MapInteractionsActivity.kt](src/main/java/com/example/composedemos/mapinteractions/MapInteractionsActivity.kt) | | Demonstrates handling click events on map coordinates and POIs. |
 | **Popovers** | ✅ Done | [PopoversActivity.kt](src/main/java/com/example/composedemos/popovers/PopoversActivity.kt) | <img src="src/main/assets/screenshots/popovers_screenshot.png" alt="Screenshot" width="121"/> | Shows how to display interactive popover overlays at specific coordinates on the map. |
 | **Camera Controls** | ✅ Done | [CameraControlsActivity.kt](src/main/java/com/example/composedemos/cameracontrols/CameraControlsActivity.kt) | <img src="src/main/assets/screenshots/camera_controls_screenshot.png" alt="Screenshot" width="121"/> | Demonstrates manual control of the camera center, heading, tilt, and range using UI controls. |
 | **Polygons** | ✅ Done | [PolygonsActivity.kt](src/main/java/com/example/composedemos/polygons/PolygonsActivity.kt) | <img src="src/main/assets/screenshots/polygons_screenshot.png" alt="Screenshot" width="121"/> | Demonstrates drawing 3D polygons with fill colors and outlines on the map. |
 | **Models** | ✅ Done | [ModelsActivity.kt](src/main/java/com/example/composedemos/models/ModelsActivity.kt) | <img src="src/main/assets/screenshots/models_screenshot.png" alt="Screenshot" width="121"/> | Shows how to load and place custom 3D models (gLTF) on the map with position, scale, and orientation. |
-| **Markers** | ✅ Done | [MarkersActivity.kt](src/main/java/com/example/composedemos/markers/MarkersActivity.kt) | <img src="src/main/assets/screenshots/markers_screenshot.png" alt="Screenshot" width="121"/> | Demonstrates adding 2D markers with custom icons and anchor points to the 3D map. |
+| **Markers** | ✅ Done | [MarkersActivity.kt](src/main/java/com/example/composedemos/markers/MarkersActivity.kt) | <img src="src/main/assets/screenshots/markers_screenshot.png" alt="Screenshot" width="121"/> | Demonstrates 2D markers with custom icons, styled pins (pin configurations), and collision behaviors. |
 | **Camera Restrictions** | ✅ Done | [CameraRestrictionsActivity.kt](src/main/java/com/example/composedemos/camerarestrictions/CameraRestrictionsActivity.kt) | <img src="src/main/assets/screenshots/camera_restrictions_screenshot.png" alt="Screenshot" width="121"/> | Shows how to restrict the camera range and center bounds to a specific area. |
 | **Flight Simulator** | 🚧 Skeleton | [FlightSimulatorActivity.kt](src/main/java/com/example/composedemos/flightsimulator/FlightSimulatorActivity.kt) | | Will demonstrate a first-person camera view simulating flight. |
 | **Routes API** | ✅ Done | [RoutesActivity.kt](src/main/java/com/example/composedemos/routes/RoutesActivity.kt) | <img src="src/main/assets/screenshots/routes_screenshot.png" alt="Screenshot" width="121"/> | Demonstrates loading a route from file, rendering the polyline, and animating a 3D car model along the route using a flow-based engine. |

Maps3DSamples/ComposeDemos/app/src/main/java/com/example/composedemos/markers/MarkersActivity.kt

@@ -17,6 +17,7 @@
 package com.example.composedemos.markers
 
 import android.os.Bundle
+import android.widget.Toast
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
@@ -40,6 +41,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.platform.LocalContext
 import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.WindowInsetsControllerCompat
@@ -49,9 +51,12 @@ import com.google.android.gms.maps3d.model.ImageView
 import com.google.android.gms.maps3d.model.Map3DMode
 import com.google.android.gms.maps3d.model.camera
 import com.google.android.gms.maps3d.model.latLngAltitude
+import com.google.android.gms.maps3d.model.CollisionBehavior
 import com.google.maps.android.compose3d.GoogleMap3D
 import com.google.maps.android.compose3d.MarkerConfig
 import com.google.maps.android.compose3d.PopoverConfig
+import com.google.maps.android.compose3d.PinConfig
+import com.google.maps.android.compose3d.GlyphConfig
 
 class MarkersActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -78,6 +83,7 @@ class MarkersActivity : ComponentActivity() {
 
 @Composable
 fun MarkersScreen() {
+    val context = LocalContext.current
     var isMapSteady by remember { mutableStateOf(false) }
     var popovers by remember { mutableStateOf(emptyList<PopoverConfig>()) }
 
@@ -96,21 +102,22 @@ fun MarkersScreen() {
         }
     }
 
+    // 1. Default Image-styled Marker with REQUIRED collision behavior
     val alienMarker = remember {
         MarkerConfig(
             key = "alien",
             position = latLngAltitude {
-                latitude = 44.59054845363309
-                longitude = -104.715177415273
+                latitude = 44.590548
+                longitude = -104.715177
                 altitude = 10.0
             },
             altitudeMode = AltitudeMode.RELATIVE_TO_MESH,
             styleView = ImageView(R.drawable.alien),
             label = "Devil's Tower Alien",
             isExtruded = true,
             isDrawnWhenOccluded = true,
+            collisionBehavior = CollisionBehavior.REQUIRED,
             onClick = {
-                // State-driven popover creation! No direct map manipulation.
                 popovers = listOf(
                     PopoverConfig(
                         key = "alien_popover",
@@ -124,7 +131,7 @@ fun MarkersScreen() {
                                 modifier = Modifier.padding(8.dp),
                             ) {
                                 Text(
-                                    text = "They didn't just come to sculpt mashed potatoes.",
+                                    text = "They didn't just come to sculpt mashed potatoes. 👽",
                                     modifier = Modifier.padding(16.dp),
                                     color = Color.Black,
                                 )
@@ -136,6 +143,60 @@ fun MarkersScreen() {
         )
     }
 
+    // 2. Custom Styled Red Pin with Cyan Icon Glyph and OPTIONAL collision behavior
+    val redPinMarker = remember {
+        MarkerConfig(
+            key = "styled_red_pin",
+            position = latLngAltitude {
+                latitude = 44.5902
+                longitude = -104.7148
+                altitude = 50.0
+            },
+            altitudeMode = AltitudeMode.RELATIVE_TO_GROUND,
+            label = "Custom Color Pin",
+            isExtruded = true,
+            isDrawnWhenOccluded = true,
+            collisionBehavior = CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
+            pinConfig = PinConfig(
+                backgroundColor = android.graphics.Color.RED,
+                borderColor = android.graphics.Color.WHITE,
+                glyph = GlyphConfig.Color(android.graphics.Color.CYAN)
+            ),
+            onClick = {
+                Toast.makeText(context, "Clicked Styled Red Pin!", Toast.LENGTH_SHORT).show()
+            }
+        )
+    }
+
+    // 3. Custom Styled Yellow Pin with Text Glyph and OPTIONAL collision behavior
+    val yellowTextPinMarker = remember {
+        MarkerConfig(
+            key = "styled_text_pin",
+            position = latLngAltitude {
+                latitude = 44.5895
+                longitude = -104.7160
+                altitude = 50.0
+            },
+            altitudeMode = AltitudeMode.RELATIVE_TO_GROUND,
+            label = "Custom Text Pin",
+            isExtruded = true,
+            isDrawnWhenOccluded = true,
+            collisionBehavior = CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
+            pinConfig = PinConfig(
+                backgroundColor = android.graphics.Color.YELLOW,
+                borderColor = android.graphics.Color.BLUE,
+                glyph = GlyphConfig.Text("WY\n⛰️", android.graphics.Color.RED)
+            ),
+            onClick = {
+                Toast.makeText(context, "Clicked Wyoming Text Pin!", Toast.LENGTH_SHORT).show()
+            }
+        )
+    }
+
+    val allMarkers = remember(alienMarker, redPinMarker, yellowTextPinMarker) {
+        listOf(alienMarker, redPinMarker, yellowTextPinMarker)
+    }
+
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -145,7 +206,7 @@ fun MarkersScreen() {
         GoogleMap3D(
             camera = devilsTowerCamera,
             mapMode = Map3DMode.HYBRID,
-            markers = listOf(alienMarker),
+            markers = allMarkers,
             popovers = popovers,
             modifier = Modifier.fillMaxSize(),
             onMapSteady = {