AsyncImage (as custom map markers) don't show insi...
# compose
h
AsyncImage (as custom map markers) don't show inside GoogleMap. Any help is welcome.
Copy code
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?
y
See the docs, you need to tell it about the change https://github.com/googlemaps/android-maps-compose/blob/main/README.md
With coil you might be able to split the loading and use the loading state in the key param?
h
You mean I should use it inside a LaunchedEffect?
y
h
I'll take a look into this. Thanks!
I did it. thank you so much, @yschimke 🙂
c
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 😞
Copy code
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
h
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.
This new state is the key
c
isn’t that the same that i posted above? the painter.state change used as key should also trigger recomposition when the state changes 🤔
i tried using the boolean flag and it still does not work for me.
Copy code
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"
    )

}
h
Sorry, I haven't opened Slack in two weeks. Did you manage to do it?
c
no, still an open issue for me 😕
h
@Christoph Wiesner does it crash?
If it does, maybe try to add
.allowHardware(false)
to the ImageRequest builder.
c
no, it just does cancel the loading of the image request. resulting in an empty marker
h
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.
c
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.
h
I ran the sample and worked for me, only after disabling hardware.
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)
e
Is it working now?
c
yes, using
Copy code
AsyncImage(
                model =
                    ImageRequest
                        .Builder(LocalContext.current)
                        .data(url)
                        .allowHardware(false)
                        .crossfade(true)
                        .build(),
            )
e
No need to use the asyncImage.state in the markerComposable key?
c
no, but i do cluster my items - maybe the clusterer does sth different than usual markers
💪 1
347 Views