Google Map

Add a Marker

A map by itself is useful for exploring, but what if you want to tell the user where something is?

That's where markers come in, and where the GoogleMap content parameter becomes useful.

Our GoogleMap call is going to get more complex over the next several steps. By Creating a new @Composable to hold the map, we can set up parameters

show in full file app/src/main/java/com/androidbyexample/google/maps/GoogleMapDisplay.kt

// ...
import com.google.maps.android.compose.rememberUpdatedMarkerState

@Composable
fun GoogleMapDisplay(
    place: LatLng,
    placeDescription: String,
    modifier: Modifier,
) {
    val placeState =
        rememberUpdatedMarkerState(position = place)

    GoogleMap(
        modifier = modifier,
    ) {
        MarkerInfoWindowContent(
            state = placeState,
            title = placeDescription,
            onClick = {
                placeState.showInfoWindow()
                true
            }
        )
    }
}

Our new @Composable takes a LatLng for the place to display the marker, a String description of the marker, and a Modifier.

We set up the data for the Marker using rememberUpdatedMarkerState(). This creates a slot in the Compose UI tree to hold a MarkerState instance. This instance will be updated whenever we recompose, similar to rememberUpdatedState().

Once we have data, we can Create the actual Marker in the GoogleMap content using MarkerInfoWindowContent().

We simplify the Caller (passing in a place)

show in full file app/src/main/java/com/androidbyexample/google/maps/MainActivity.kt

// ...
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // ...
        setContent {
            GooglemapsTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
//                  GoogleMap(
                    val googleHQ = LatLng(37.42423291057923, -122.08811454627153)

                    GoogleMapDisplay(
                        place = googleHQ,
                        placeDescription = "Google HQ",
                        modifier = Modifier.padding(innerPadding).fillMaxSize(),
//                  ) {
//                      // no content yet
//                  }
                    )
                }
            }
        }
    }
}

Running the application is a bit disappointing; we're still centered at 0.0, 0.0. If we pan over we'll see the marker:

You can zoom by double-tapping, pinching, or tapping the "+" button to see

If you tap on the marker, its description is displayed and the map centers on the marker:

---

All code changes

ADDED: app/src/main/java/com/androidbyexample/google/maps/GoogleMapDisplay.kt

package com.androidbyexample.google.maps

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.google.android.gms.maps.model.LatLng
import com.google.maps.android.compose.GoogleMap
import com.google.maps.android.compose.MarkerInfoWindowContent
import com.google.maps.android.compose.rememberUpdatedMarkerState

@Composable
fun GoogleMapDisplay(
    place: LatLng,
    placeDescription: String,
    modifier: Modifier,
) {
    val placeState =
        rememberUpdatedMarkerState(position = place)

    GoogleMap(
        modifier = modifier,
    ) {
        MarkerInfoWindowContent(
            state = placeState,
            title = placeDescription,
            onClick = {
                placeState.showInfoWindow()
                true
            }
        )
    }
}

CHANGED: app/src/main/java/com/androidbyexample/google/maps/MainActivity.kt

package com.androidbyexample.google.maps

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.ui.Modifier
import com.androidbyexample.google.maps.ui.theme.GooglemapsTheme
//import com.google.maps.android.compose.GoogleMap
import com.google.android.gms.maps.model.LatLng

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            GooglemapsTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
//                  GoogleMap(
                    val googleHQ = LatLng(37.42423291057923, -122.08811454627153)

                    GoogleMapDisplay(
                        place = googleHQ,
                        placeDescription = "Google HQ",
                        modifier = Modifier.padding(innerPadding).fillMaxSize(),
//                  ) {
//                      // no content yet
//                  }
                    )
                }
            }
        }
    }
}