Integrate Google Maps in Jetpack Compose List

Muhammad Danish
Jul 11 · 2 min read

In this article I am going to show you how you can add google maps inside jetpack compose list. I recommend you to read my previous article on integration of google maps in jetpack compose android.

https://daanidev.medium.com/google-maps-in-jetpack-compose-android-ae7b1ad84e9

So, now you just need to create a project with jetpack compose empty activity and add these libraries for google maps

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:1.3.2")

Now you need to create layout package inside res package and create new resource file in it with following code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.fragment.app.FragmentContainerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Now Create MapUtils file and add below code in that file

After that create data class which will be responsible to add dynamic data in your list

data class MapModel (val pickUp:LatLng,val destination:LatLng,val date:String,val time:String
,val pickUpTitle:String,val destinationTitle:String)

After creating the data class create your repository class and add the following function in it.

Now add below code in your theme block inside oncreate method of your mainactivity.kt

Now finally add below composable function in your mainactivity.kt

Don’t forgot to add below tags in your manifest file.

<uses-permission android:name="android.permission.INTERNET"/><meta-data android:name="com.google.android.geo.API_KEY"
android:value="api_key"/>
Finally the output will be like this
Finally the output will be like this
Output Result

If you face any issue then check out Google Maps in JetPack Compose List

https://github.com/DaaniDev/googlemapinsidelist_jetpackcompose.git

Proud to geek out. Follow to join our 1M monthly readers.