ScaleBar / DisappearingScaleBar: androidx.compose.ui.node.LayoutNode cannot be cast to com.google.maps.android.compose.MapNode

[DarrylBayliss]

Environment Details

1. API: Widgets Library
2. Android 11 (Running on Motorola G8 Power)
3. Library Version: 2.11.2

Steps to reproduce

Steps to reproduce

1. Setup an Android project with google maps library, google maps compose & google maps compose utils
2. Create a GoogleMap, add a ScaleBar or DisappearingScaleBar Composable inside.
3. Run the app, observe the app crashing on start.

Code example

        setContent {
            ComposeForMapsTheme {

                val hydePark = LatLng(51.508610, -0.163611)
                val regentsPark = LatLng(51.531143, -0.159893)
                val primroseHill = LatLng(51.539556, -0.16076088)

                val crystalPalacePark = LatLng(51.42153, -0.06749)
                val greenwichPark = LatLng(51.476688, 0.000130)
                val lloydPark = LatLng(51.364188, -0.080703)

                val parkMarkers = remember {
                    mutableStateListOf(
                        ParkItem(LatLng(51.508610, -0.163611), "Hyde Park", "Marker in Hyde Park"),
                        ParkItem(regentsPark, "Regents Park", "Marker in Regents Park"),
                        ParkItem(primroseHill, "Primrose Hill", "Marker in Primrose Hill"),
                        ParkItem(
                            crystalPalacePark,
                            "Crystal Palace",
                            "Marker in Crystal Palace"
                        ),
                        ParkItem(
                            greenwichPark,
                            "Greenwich Park",
                            "Marker in Greenwich Park"
                        ),
                        ParkItem(lloydPark, "Lloyd Park", "Marker in Lloyd Park"),
                    )
                }

                val cameraPositionState = rememberCameraPositionState {
                    position = CameraPosition.fromLatLngZoom(hydePark, 10f)
                }

                var selectedMarker: ParkItem? by remember { mutableStateOf(null) }

                if (selectedMarker != null) {
                    StreetView(Modifier.fillMaxSize(), streetViewPanoramaOptionsFactory = {
                        StreetViewPanoramaOptions().position(selectedMarker!!.position)
                    })
                } else {
                    Box(contentAlignment = Alignment.Center) {
                        GoogleMap(
                            modifier = Modifier.fillMaxSize(),
                            cameraPositionState = cameraPositionState
                        ) {
                            DisappearingScaleBar(
                                modifier = Modifier
                                    .padding(top = 5.dp, end = 15.dp)
                                    .align(Alignment.TopStart),
                                cameraPositionState = cameraPositionState
                            )


                            Clustering(items = parkMarkers,
                                onClusterClick = {
                                    // Handle when the cluster is tapped
                                    false
                                }, onClusterItemClick = { marker ->
                                    // Handle when a marker in the cluster is tapped
                                    selectedMarker = marker
                                    false
                                })


                            parkMarkers.forEach {
                                Circle(
                                    center = it.position,
                                    radius = 120.0,
                                    fillColor = Color.Green,
                                    strokeColor = Color.Green
                                )
                            }
                        }
                    }
                }
            }
        }

Stack trace

FATAL EXCEPTION: main
Process: com.example.composeformaps, PID: 30106
java.lang.ClassCastException: androidx.compose.ui.node.LayoutNode cannot be cast to com.google.maps.android.compose.MapNode
at com.google.maps.android.compose.MapApplier.insertTopDown(MapApplier.kt:34)
at androidx.compose.runtime.ComposerImpl$createNode$2.invoke(Composer.kt:1613)
at androidx.compose.runtime.ComposerImpl$createNode$2.invoke(Composer.kt:1608)
at androidx.compose.runtime.ComposerImpl$recordInsert$2.invoke(Composer.kt:3546)
at androidx.compose.runtime.ComposerImpl$recordInsert$2.invoke(Composer.kt:3543)
at androidx.compose.runtime.CompositionImpl.applyChangesInLocked(Composition.kt:818)
at androidx.compose.runtime.CompositionImpl.applyChanges(Composition.kt:849)
at androidx.compose.runtime.Recomposer.composeInitial$runtime_release(Recomposer.kt:1041)
at androidx.compose.runtime.ComposerImpl$CompositionContextImpl.composeInitial$runtime_release(Composer.kt:4007)
at androidx.compose.runtime.CompositionImpl.setContent(Composition.kt:520)
at com.google.maps.android.compose.GoogleMapKt$GoogleMap$10.invokeSuspend(GoogleMap.kt:239)
at kotlin.coroutines.jvm.internal.BaseContinuationImpl.resumeWith(ContinuationImpl.kt:33)
at kotlinx.coroutines.DispatchedTask.run(DispatchedTask.kt:106)
at androidx.compose.ui.platform.AndroidUiDispatcher.performTrampolineDispatch(AndroidUiDispatcher.android.kt:81)
at androidx.compose.ui.platform.AndroidUiDispatcher.access$performTrampolineDispatch(AndroidUiDispatcher.android.kt:at androidx.compose.ui.platform.AndroidUiDispatcher$dispatchCallback$1.run(AndroidUiDispatcher.android.kt:57)
at android.os.Handler.handleCallback(Handler.java:942)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loopOnce(Looper.java:201)
at android.os.Looper.loop(Looper.java:288)
at android.app.ActivityThread.main(ActivityThread.java:7872)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)
Suppressed: kotlinx.coroutines.DiagnosticCoroutineContextException: [androidx.compose.ui.platform.MotionDurationScaleImpl@935a89d, androidx.compose.runtime.BroadcastFrameClock@ba6d112, StandaloneCoroutine{Cancelling}@fa6b0e3, AndroidUiDispatcher@670aae0]

[wangela]

If you would like to upvote the priority of this issue, please comment below or react with 👍 so we can see what is popular when we triage.

@DarrylBayliss Thank you for opening this issue. 🙏
Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[googlemaps-bot]

🎉 This issue has been resolved in version 2.13.0 🎉

The release is available on:

• v2.13.0
• GitHub release

Your semantic-release bot 📦🚀

[anonym24]

not fully fixed in 2.13.0 - https://stackoverflow.com/questions/77062608/displaying-a-marker-always-at-the-center-of-the-map-with-google-maps-compose

So I was trying to use the following code to display a marker always at the center of the map

val cameraPositionState = rememberCameraPositionState()

GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState,
    properties = MapProperties(
        isMyLocationEnabled = true
    ),
) {
   if (selectAPoint) {
    val markerState = rememberMarkerState(
        key = "selectAPoint",
        position = cameraPositionState.position.target
    )
    Marker(
        state = markerState,
        title = "centered marker"
    )
    return@GoogleMap
   }
}

but an app crashes with the following expection:

androidx.compose.runtime.ComposeRuntimeError: Compose Runtime internal
error. Unexpected or incorrect use of the Compose internal runtime API
(Start/end imbalance). Please report to Google or use

I was also trying to use the following example https://www.boltuix.com/2022/11/place-marker-on-center-of-screen-on.html

@Composable
fun ComposeMapCenterPointMapMarker() {
    val markerPosition = LatLng(1.35, 103.87)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(markerPosition, 18f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    )
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            IconButton(
                onClick = {
                },
            ) {
                Image(
                    painter = painterResource(id = R.drawable.pin2),
                    contentDescription = "marker",
                )
            }
            Text(text = "Is camera moving: ${cameraPositionState.isMoving}" +
                    "\n Latitude and Longitude: ${cameraPositionState.position.target.latitude} " +
                    "and ${cameraPositionState.position.target.longitude}",
                textAlign = TextAlign.Center
            )
        }
}

But app crashes with

java.lang.ClassCastException: androidx.compose.ui.node.LayoutNode
cannot be cast to com.google.maps.android.compose.MapNode

[anonym24]

androidx.compose.runtime.ComposeRuntimeError: Compose Runtime internal
error. Unexpected or incorrect use of the Compose internal runtime API
(Start/end imbalance). Please report to Google or use

I guess the first issue was because I was using return@GoogleMap

[DarrylBayliss]

Hey @anonym24,

I think you're right about the first issue. I don't see the need for returning the GoogleMap.

I believe your second issue is more related to #344, where non Google Map related composables being created inside GoogleMap causes a crash. There should be a build warning to warn against this, although as the issue suggests a lint rule would be better. 😄

[kikoso]

Hi @anonym24 .

What @DarrylBayliss said. We could certainly work on a Lint Rule for the issue on #344, although you should see the warning in the build screen in Android Studio.

[Hanif-MI]

implementation ("com.google.maps.android:maps-compose:4.3.3")

i am still facing same issue in above mention version

 GoogleMap(
            modifier = Modifier.fillMaxSize(),
            cameraPositionState = cameraPositionState
        ) {

            // You can also use ScaleBar
            DisappearingScaleBar(
                modifier = Modifier
                    .padding(top = 5.dp, end = 15.dp)
                    .align(Alignment.TopStart),
                cameraPositionState = cameraPositionState
            )

         }