Jetpack Compose - How to Add Multiple Markers to Google Maps

Last updated Oct 31, 2021

In this Jetpack compose tutorial we will cover how to add Markers to the Google Maps with Jetpack Compose. In the Previous example we covered how to Load Google Maps with Jetpack Compose.

To add Markers to the Google Maps we have to create instance of MarkerOptions. This MarkerOptions has properties like

Title,Position,Icons...

Once ready with MarkerOptions instance we will add it to map by addMarker() method

Let's get Started

Step 1: Create Jetpack Compose project with Andorid studio.

Step 2: Add required dependencies in build.gradle file

Read previous example How to setup and Load Google Maps with Jetpack Compose

Step 3: Create Map Instance

AndroidView(
    {mapView}
) { mapView ->
    CoroutineScope(Dispatchers.Main).launch {


            mapView.getMapAsync {

}

Step 4: Create Markers add

Let's create multiple markers

val mark1 = LatLng(17.385, 78.4867) //Hyderabad
val mark2 = LatLng(18.5204, 73.8567) //Hyderabad

it.moveCamera(CameraUpdateFactory.newLatLngZoom(mark1, 12f))
val markerOptions =  MarkerOptions()
    .title("Hyderabad")
    .position(mark1)


val markerOptions2 =  MarkerOptions()
    .title("Pune")
    .position(mark2)

Add Multiple Merkers to Map

it.addMarker(markerOptions)

it.addMarker ( markerOptions2 )

Step 5: Run the application

Now we can see the Google Maps with multiple markers.

Add Marked to Google Maps with Jetpack compose

Complete code for add multiple markers to Google Maps with Jetpack compose

package com.rrtutors.compose_maps


import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.compose.ui.viewinterop.AndroidView
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
import com.google.android.libraries.maps.CameraUpdateFactory
import com.google.android.libraries.maps.MapView
import com.google.android.libraries.maps.model.LatLng
import com.google.android.libraries.maps.model.MarkerOptions
import com.google.android.libraries.maps.model.PolylineOptions
import com.google.maps.android.ktx.addMarker
import com.google.maps.android.ktx.awaitMap
import com.rrtutors.compose_maps.ui.theme.ComposeMapsTheme
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeMapsTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    GoogleMaps()
                }
            }
        }
    }
}
@Composable
fun GoogleMaps() {

    var mapView = rememberMapViewWithLifeCycle()

    Box(){

        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
        ) {
            AndroidView(
                {mapView}
            ) { mapView ->
                CoroutineScope(Dispatchers.Main).launch {


                        mapView.getMapAsync {

                            it.mapType=1
                            it.uiSettings.isZoomControlsEnabled = true
                            val mark1 = LatLng(17.385, 78.4867) //Hyderabad
                            val mark2 = LatLng(18.5204, 73.8567) //Hyderabad

                            it.moveCamera(CameraUpdateFactory.newLatLngZoom(mark1, 12f))
                            val markerOptions =  MarkerOptions()
                                .title("Hyderabad")
                                .position(mark1)
                            it.addMarker(markerOptions)

                            val markerOptions2 =  MarkerOptions()
                                .title("Pune")
                                .position(mark2)
                            it.addMarker( markerOptions2 )



                    }




                }
            }
        }

    }

}


@Composable
fun rememberMapViewWithLifeCycle(): MapView {
    val context = LocalContext.current
    val mapView = remember {
        MapView(context).apply {
            id = com.google.maps.android.ktx.R.id.map_frame
        }
    }
    val lifeCycleObserver = rememberMapLifecycleObserver(mapView)
    val lifeCycle = LocalLifecycleOwner.current.lifecycle
    DisposableEffect(lifeCycle) {
        lifeCycle.addObserver(lifeCycleObserver)
        onDispose {
            lifeCycle.removeObserver(lifeCycleObserver)
        }
    }

    return mapView
}

@Composable
fun rememberMapLifecycleObserver(mapView: MapView): LifecycleEventObserver =
    remember(mapView) {
        LifecycleEventObserver { _, event ->
            when(event) {
                Lifecycle.Event.ON_CREATE -> mapView.onCreate(Bundle())
                Lifecycle.Event.ON_START -> mapView.onStart()
                Lifecycle.Event.ON_RESUME -> mapView.onResume()
                Lifecycle.Event.ON_PAUSE -> mapView.onPause()
                Lifecycle.Event.ON_STOP -> mapView.onStop()
                Lifecycle.Event.ON_DESTROY -> mapView.onDestroy()
                else -> throw IllegalStateException()
            }
        }
    }

Conclusion: We learned how to create Google Maps and add Multiple Markers with Jetpack compose.

Article Contributed By :

1675 Views

Projects By category