Adding Google Map in Jetpack Compose 🗺📌- Using AndroidView And android-maps-compose

Photo by Andrew Stutesman on Unsplash

Adding a map to your application is an important feature, Google map provides an easier implementation. When using the XML view it is easy and there are many resources that already cover this but with the incoming Jetpack Compose we have to focus on how to do this in a declarative way.

I have used it in Snapchat Clone with Jetpack Compose, it is really interesting and easy to implement android-maps-compose. you have a look I have added the link below.🗺🎉

Presently there are two ways to add Google Map to your Jetpack Compose app, First is using the old way of Android View, and Secondly using android-maps-compose introduced recently.

Required Setup

Before anything, get the Google Map API from the Google Play Console, reference the video link.

Then add the Internet permission and Meta Tag to add the API key in Manifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<application>
....... .......
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="${GMP_KEY}"
/>
</application>

I have also used secrets-gradle-plugin to hide my Maps API key, this is really important if you want to share on GitHub. Here is a video link to help you out.

Finally, let’s start coding the UI with Jetpack Compose using both Android View and Android Compose Map

Using AndroidView🏴‍☠️

This is the old way to put up Google Maps into your Jetpack Compose.

First adding the dependencies, I am expecting you have already added the Compose dependencies.

implementation 'com.google.maps.android:android-maps-utils:2.2.3'    implementation "com.google.android.libraries.maps:maps:3.1.0-beta"    implementation "com.google.maps.android:maps-v3-ktx:2.2.0"    implementation "androidx.fragment:fragment-ktx:1.4.1"

First, let’s understand what AndroidView is

@Composable
fun <T : View> AndroidView(
factory: (Context) -> T,
modifier: Modifier = Modifier,
update: (T) -> Unit = NoOpUpdate ) {
...
}

AndroidView() is a Composable that can be used to add Android Views inside of a @Composable function.

  • factory expects a function that gets an Android Context and will return a class that extends an Android View. This constructor function will only be executed at initial rendering and when a parent composable triggers a new execution. You can use the value of a state here, but it will not observe any changes.
  • modifier can be used to apply modifiers to the layout that will host the created View.
  • In the update function, you will get the View that was created in ctor. This function is used to handle all updates of the composition tree. Here you can use your state objects and handle all the update logic.

Let’s discuss our approach now, we will make rememberMapViewWithLifecycle() which will return us MapView, with the lifecycle-aware enhancement with the managed state, we have attached an observer inside the DisposableEffectwith the LocalLifeCycleOwner. To manage different lifecycle events and work accordingly we have made the function rememberMapLifecycleObserver() that will return the map state accordingly. You can simply just copy these functions it will work for general use cases.

You can get all the features of Map from rememberMapViewWithLifecycle(), like you uiSettings.isZoomControlsEanbled , setMapStyle() etc

Using Android Maps Compose ⚡

Let’s add some dependencies

compose_version = '1.2.0-alpha06'
// Use 1.2.x version of compose for map-compose >=1.3.0
// This is common issue focus on this.

implementation "com.google.maps.android:maps-compose:2.0.0" implementation "com.google.android.gms:play-services-maps:18.0.2"

It is really simple, if you understand compose you can simply understand the below, the dependencies give us access to GoogleMap composable.

Finally, you have done it wow added Map in your Compose App!!🎉

For any doubts and suggestions, you can reach out on my Instagram, LinkedIn. Follow me for Kotlin content and more. Happy Coding!

I will well appreciate one of these 👏

References

Recent Posts

--

--

--

We are here building a community here.

Recommended from Medium

Android styling: themes vs styles

Implementation of Firebase In-App Messaging in Android development

What are Lifecycle-Aware Components in Android?🚀

Leveraging Android Framework for Accessibility

https://wearepurple.org.uk/the-purple-pound-infographic/

OnSaveInstanceState and OnRestoreInstanceState in Android

Building a Joke App with Cloud Firestore using Kotlin part 01

Kotlin Standard Delegates — Lazy, Observable and Vetoable

Android background in a nutshell — Part 1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Debanshu Datta

Debanshu Datta

Android @Gojek | Mobile Developer | Backend Developer (Java/Kotlin)

More from Medium

Jetpack Compose: Google Map Camera Movement Listener | Erselan Khan

Handling app lifecycle events in Jetpack Compose

Compose Intrinsic Redraw Bug

Type Safe Navigation With Jetpack Compose Destinations