Google Maps SDK for MapConductor Android

Description

MapConductor provides a unified API for Android Jetpack Compose. You can use Google Maps view with Jetpack Compose, but you can also switch to other Maps SDKs (such as MapLibre, HERE, and so on), anytimes. Even you use the wrapper API, but you can still access to the native Google Maps view if you want.

Setup

https://mapconductor.com/setup/android/google-maps/

API key

This module reads the key from an AndroidManifest.xml<meta-data> entry:

<meta-dataandroid:name="com.google.android.geo.API_KEY"android:value="${GOOGLE_MAPS_API_KEY}" />

Put the value in secrets.properties and let the Secrets Gradle Plugin inject it; keep that file out of source control.

Usage

@Composable
funMapView(modifier:Modifier = Modifier) {
var selectedMarker by remember { mutableStateOf<MarkerState?>(null) }
val center =GeoPoint(
latitude =35.6762,
longitude =139.6503,
)
val mapViewState =
rememberGoogleMapViewState(
cameraPosition =MapCameraPosition(
position = center,
zoom =2.0,
),
)
val markerState = remember { MarkerState(
position = center,
icon =DefaultMarkerIcon().copy(
label ="Tokyo",
),
onClick = {
selectedMarker = it
}
)
}
GoogleMapView(
state = mapViewState,
modifier = modifier,
) {
Marker(markerState)
selectedMarker?.let {
InfoBubble(
marker = it,
) {
Text("Hello, world!")
}
}
}
}

Components

GoogleMapView [docs]

@Composable
funMapExample() {
val initCameraPosition =MapCameraPosition(
position =GeoPoint(
latitude =37.422198,
longitude =-122.085377,
),
zoom =17.0,
tilt =60.0,
bearing =30.0,
)
val mapViewState = rememberGoogleMapViewState(
cameraPosition = initCameraPosition,
)
GoogleMapView(mapViewState)
}

---

Marker [docs]

@Composable
funMarkerExample() {
val markerState = remember { MarkerState(
position =GeoPoint(...),
icon =DefaultMarkerIcon().copy(
label ="Tokyo",
),
onClick = {
it.animate(MarkerAnimation.Bounce)
},
) }
GoogleMapView(...) {
Marker(markerState)
}
}

---

InfoBubble [docs]

@Composable
funInfoBubbleExample() {
var selectedMarker by remember { mutableStateOf<MarkerState?>(null) }
val markerState = remember { MarkerState(
...,
onClick = {
selectedMarker = it
},
) }
GoogleMapView(...) {
Marker(markerState)
selectedMarker?.let {
InfoBubble(
marker = it,
) {
Text("Hello, world!")
}
}
}
}

---

Circle [docs]

@Composable
funCircleExample() {
val circleState = remember { CircleState(
center =GeoPoint(...),
radiusMeters =50.0,
fillColor =Color.Blue.copy(alpha =0.5f),
onClick = {
it.state.fillColor =Color.Red.copy(alpha =0.5f)
}
) }
GoogleMapView(...) {
Circle(circleState)
}
}

---

Polyline [docs]

@Composable
funPolylineExample() {
val polylineState = remember { PolylineState(
points = airports,
strokeColor =Color.Blue.copy(alpha =0.5f),
geodesic =true,
) }
GoogleMapView(...) {
Polyline(polylineState)
}
}

---

Polygon [docs]

@Composable
funPolygonExample() {
val polygonState = remember { PolygonState(
points = goryokaku,
strokeColor =Color.Red.copy(alpha =0.5f),
fillColor =Color.Red.copy(alpha =0.7f),
) }
GoogleMapView(...) {
Polygon(polygonState)
}
}

---

Polygon Hole

@Composable
funPolygonExample() {
val polygonState =
remember {
PolygonState(
points =listOf(...),
holes =listOf(
listOf(...),
listOf(...),
),
fillColor =Color(0xCC787880),
strokeColor =Color.Red,
strokeWidth =2.dp,
)
}
GoogleMapView(...) {
Polygon(polygonState)
}
}

---

GroundImage [docs]

@Composable
funGroundImageExample() {
val groundImageState = remember { GroundImageState(
bounds =GeoRectBounds(
southWest =GeoPoint.fromLatLong(...),
northEast =GeoPoint.fromLatLong(...),
),
image = image,
opacity =0.5f,
) }
GoogleMapView(state = mapViewState) {
GroundImage(groundImageState)
}
}