How to Add Multiple Markers to Google Maps in Android using Jetpack Compose?

Google Maps is used in most apps which are used to represent many locations and markers on Google Maps. We have seen markers on Google maps for multiple locations. In this article, we will take a look at the implementation of Multiple Markers on Google Maps in Android using Jetpack Compose. 

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. While choosing the template, select Empty Compose Activity. If you do not find this template, try upgrading the Android Studio to the latest version. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Adding a new color to the Color.kt file

Navigate to app > java > your app’s package name > ui.theme > Color.kt file and add the below code to it. 

Step 3: Adding Dependency to use Google Maps.

Navigate to build.gradle file and add the below dependency in the build.gradle file.

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

After adding the dependency simply click on the sync now option to install it.

Step 4: Adding Permissions and Google Maps API key.

Navigate to app > AndroidManifest.xml file and add the below code in the application tag for adding the API key. 

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="Enter your API key" />

Check out the below article on How to Generate API Key for Using Google Maps in Android?

Step 5: Create a New Layout File for Map Layout.

Navigate to app > res > Right click on it > New > Directory and name it as layout. Now right-click on that directory and click on New > Layout resource file. Create a new xml file and name it map_layout and add the below code to it. Comments are added in the code to get to know it in detail. 

Step 6: Create a new file for creating a Map

Navigate to app>java>your app's package name>Right click on it>New>Kotlin class and name it as MapUtils and add the below code to it. Comments are added in the code to get to know it in detail. 

Step 7: Working with MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Output: