A library for using Google Maps in Compose HTML.
This library is inspired by Maps Compose for Android.
Adding a GoogleMap
to your Compose UI as follows:
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition(
center = LatLng(23.2, 120.5),
zoom = 8.0,
)
}
GoogleMap(
apiKey = "YOUR_API_KEY",
cameraPositionState = cameraPositionState,
attrs = {
style {
width(100.percent)
height(100.percent)
}
}
)
Configuring the map
Configuring the map can be done by passing a MapOptions
object to the GoogleMap
composable.
val mapOptions = remember {
MapOptions(
fullscreenControl = false,
// ...
)
}
GoogleMap(
// ...
mapOptions = mapOptions,
) {
// ...
}
Handling map events
Map events can be handled by passing a lambda expression to the GoogleMap
composable.
GoogleMap(
// ...
onClick = {
console.log("Map clicked!")
},
onDrag = {
console.log("Map dragged!")
},
// Add more events here
) {
// ...
}
Drawing on the map
Adding child composable, such as Marker
, to the GoogleMap
composable.
GoogleMap(
// ...
) {
Marker(
state = MarkerState(position = LatLng(23.2, 120.5)),
onClick = {
console.log("Marker clicked!")
},
// ...
)
}
To display custom content on the map, use the OverlayView
composable.
GoogleMap(
// ...
) {
OverlayView(
bounds = LatLngBounds(
// ...
),
content = {
Div {
Text("Overlay View")
}
}
)
}
Currently, the following drawing composable are supported:
Marker
Polygons
(polygon, polyline, rectangle, circle)InfoWindow
OverlayView
Marker's Info Window
An info window can be added to a Marker
directly by passing a lambda expression to the infoContent
parameter.
To show the info window, call showInfoWindow()
on the MarkerState
.
state = rememberMarkerState()
Marker(
state = state,
// ...
infoContent = {
Div {
Span({ style { fontSize(20.px) } }) {
Text("Info Window Title")
}
Text("Info Window Content")
}
}
)
// show the info window
state.showInfoWindow()
Map Layers
Map layers can be added to the GoogleMap
composable.
GoogleMap(
// ...
) {
if (showTrafficLayer) {
TrafficLayer()
}
}
Currently, TrafficLayer
, TransitLayer
, BicyclingLayer
, HeatmapLayer
and KmlLayer
are supported.
Add the following to your build.gradle.kts
file:
repositories {
maven("https://jitpack.io")
}
kotlin {
sourceSets {
val jsMain by getting {
dependencies {
implementation("com.github.chihsuanwu:google-maps-compose-web:<version>")
}
}
}
}
This library is currently in alpha state and the API is subject to change.
There are still many advanced features that are not yet supported. However, if you are a user of Compose HTML and would like to use Google Maps in your web application, this library is still worth a try.
Feedback and contributions are highly appreciated! Feel free to open an issue or submit a pull request.
If you like this library, please consider starring this project, so we know that it is useful to you.