AsyncImage (as custom map markers) don't show inside GoogleMap. Any help is welcome. ```GoogleMap {...

# compose

[hamzaTheDev]

AsyncImage (as custom map markers) don't show inside GoogleMap. Any help is welcome.

GoogleMap {
    latLongList.forEachIndexed { index, latLng ->
        val markerState = rememberMarkerState(position = latLng)
        MarkerComposable(
            state = markerState
        ) {
            CustomMarker("IMAGE_URL")
        }
    }
}

Inside CustomMarker, I'm trying to show markers as images inside the GoogleMap composable, but coil's AsyncImage doesnt work properly here, but it can load local images (and network images outside GoogleMap scope), but network images don't load inside compose GoogleMap. Any solution to this?

[yschimke]

See the docs, you need to tell it about the change https://github.com/googlemaps/android-maps-compose/blob/main/README.md

[yschimke]

With coil you might be able to split the loading and use the loading state in the key param?

[hamzaTheDev]

You mean I should use it inside a LaunchedEffect?

[yschimke]

Or something like this as the key? https://coil-kt.github.io/coil/compose/#observing-asyncimagepainterstate

[hamzaTheDev]

I'll take a look into this. Thanks!

[hamzaTheDev]

I did it. thank you so much, @yschimke 🙂

[Christoph Wiesner]

did it work for you?
i'm still having trouble rendering an async image. (even when loading it outside the markerComposable).
it's really frustrating that dealing with simple things like showing an image is so hard 😞

[Christoph Wiesner]

val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data("http://...")
        .allowHardware(false)
        .build()
)

MarkerComposable(
    keys = arrayOf(painter.state),
    state = singapore4State,
) {
    Image(painter, contentDescription = null)
}

does not work for me

[hamzaTheDev]

Yeah, it worked for me. I did it by declaring a boolean mutable state (initially false) and whenever that pointer state change (see the link above), set it to true. That should tell the marker composable to recompose.

[hamzaTheDev]

This new state is the key

[Christoph Wiesner]

isn’t that the same that i posted above?
the painter.state change used as key should also trigger recomposition when the state changes 🤔

[Christoph Wiesner]

i tried using the boolean flag and it still does not work for me.

var showImage by remember {
    mutableStateOf(false)
}

val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data("<https://www.aquasafemine.com/wp-content/uploads/2018/06/dummy-man-570x570.png>")
        .size(Size.ORIGINAL) // Set the target size to load the image at.
        .build()
)

if (painter.state is AsyncImagePainter.State.Success) {
    showImage = true
}


MarkerComposable(
    keys = arrayOf(showImage),
    state = singapore4State,
) {
    Image(
        painter = painter,
        contentDescription = "asdf"
    )

}

[hamzaTheDev]

Sorry, I haven't opened Slack in two weeks. Did you manage to do it?

[Christoph Wiesner]

no, still an open issue for me 😕

[hamzaTheDev]

@Christoph Wiesner does it crash?

[hamzaTheDev]

If it does, maybe try to add .allowHardware(false) to the ImageRequest builder.

[Christoph Wiesner]

no, it just does cancel the loading of the image request.
resulting in an empty marker

[hamzaTheDev]

It may help to post your above code in a bigger context, maybe the whole container composable or the file it's in. I'll try to help.

[Christoph Wiesner]

i added the image loading to the google map sample app here: https://github.com/cwsiteplan/android-maps-compose/blob/2c066acaa0652c4dc987ac9ae6[…]c/main/java/com/google/maps/android/compose/BasicMapActivity.kt
when you open the activity for the first time the image marker is not shown.
only if you enter it a second time and the image is fetched from cache it eventually shows up.

[hamzaTheDev]

I ran the sample and worked for me, only after disabling hardware.

[Christoph Wiesner]

i configured the imageLoader to have that already_ https://github.com/cwsiteplan/android-maps-compose/blob/2c066acaa0652c4dc987ac9ae6[…]46d11f/app/src/main/java/com/google/maps/android/compose/App.kt

[Christoph Wiesner]

does the image load for you directly after a fresh install?
it certainly does not for me 🤔 ( as pointed out before - if the image is loaded from network for the first time it does not end up in the marker - only when it's already in the memory cache)

[Emiliano Schiavone]

Is it working now?

[Christoph Wiesner]

yes, using

AsyncImage(
                model =
                    ImageRequest
                        .Builder(LocalContext.current)
                        .data(url)
                        .allowHardware(false)
                        .crossfade(true)
                        .build(),
            )

[Emiliano Schiavone]

No need to use the asyncImage.state in the markerComposable key?

[Christoph Wiesner]

no, but i do cluster my items - maybe the clusterer does sth different than usual markers