How show loading spinner in Jetpack Compose while Google Maps load?
You can probably do something like this:
If the map isn't actually fully loaded after mapView.awaitMap() try replacing the line with a delay(1000). (or longer than 1000 ms)
@Composable
fun MyMap(
lat: Double,
lon: Double,
) {
val mapView = rememberMapViewWithLifeCycle()
var isMapLoading by remember { mutableStateOf(true) }
LaunchedEffect(mapView) {
mapView.awaitMap()
isMapLoading = false
}
Box {
AndroidView(
{ mapView }
) { mapView ->
CoroutineScope(Dispatchers.Main).launch {
val map = mapView.awaitMap()
map.uiSettings.isZoomControlsEnabled = false
val destination = LatLng(lat, lon)
map.moveCamera(CameraUpdateFactory.newLatLngZoom(destination, 16f))
val markerOptionsDestination = MarkerOptions()
.position(destination)
map.addMarker(markerOptionsDestination)
map.mapType = com.google.android.libraries.maps.GoogleMap.MAP_TYPE_HYBRID
}
}
if (isMapLoading) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.matchParentSize()
.background(Color.White)
) {
CircularProgressIndicator()
}
}
}
}