Still struggling to get google map interfaces on Jetpack Compose?
If you want your app to be successful, you have to consider UX to be not just a minor aspect of design but an essential component of product strategy. We found Jetpack Compose is the best ever solution for modern mobile UI development. It addresses the challenges faced when creating a polished UI quickly and efficiently. That would be a reason for the expedite reach of the jetpack compose.
A wide range of UI transmissions and updates are possible with this compose. However, still developers are struggling to get the idea about core functionalities provided by android such as camera scanning, image uploading by accessing both camera and gallery and google map.
As google map is one of the most usable and demanded interfaces for app development, it has so many features yet to integrate with mobile apps. As per the compose guidelines, google map interface has not yet been implemented in the jetpack compose. But there is a WAY..!
Yeah.. there is…The idea is, we have to do it in our own way: “Precisely customize the core stuff”.
It is obvious to use an AndroidView to launch the map.
val map = rememberMapViewWithLifecycle()
AndroidView(
{ map },
modifier = Modifier
.fillMaxWidth()
.height(450.dp)
.padding(8.dp)
.clip(RoundedCornerShape(10.dp))
) { mapView ->
mapView.getMapAsync {
for (i in listOfCoordinates) {
val position = LatLng(
i.lat,
i.lng
)
it.addMarker(MarkerOptions().position(position)).isVisible =
true
it.moveCamera(
CameraUpdateFactory.newLatLngZoom(
position,
15f
)
)
it.animateCamera(
CameraUpdateFactory.zoomTo(15f),
2000,
null
)
}
val success = it.setMapStyle(
MapStyleOptions.loadRawResourceStyle(
this@MainActivity,
R.raw.style_json
)
)
}
}
}
Here.. the map variable holds the map lifecycle. But in getMapAsync, we won’t be getting the latitude and longitude. There we use the customization part.
You can use whichever way to get the current latitude and longitude. I used a background service for receiving the same and we can set it in a global variable. Thus, this way we will be able to plot the current location and search locations on map by using jetpack compose indirectly!! 😊
Conclusion
There are so many developers (including me😋) facing difficulties in procuring the solution for integrating maps in jetpack compose. As the compose is not stable so far we could wait for the similar core functionalities implementations. The customization part is one of my experiments with google map and fortunately it was a success. Passing location coordinates is a challenging task because we do everything separately, so a bit of compromise is needed in case of the accuracy compared with how android did out of jetpack compose. Anyways more experiments with compose are in the pipeline!
Happy Coding! 😊
